Angular中的$watch方法详解


Posted in Javascript onSeptember 18, 2017

在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法。

(1)$watch简介

在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发。

AngularJS内部的watch实现了页面随model的及时更新。

$watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件。

(2)watch方法用法

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表达式或函数的字符串

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用

deepWatch:可选的布尔值命令检查被监控的对象的每个属性是否发生变化

$watch会返回一个函数,想要注销这个watch可以使用函数

(3)例子

在前面的例子中,当name的表单改变30次,然后触发某个事件。

控制器代码如下:

var firstController = function ($scope){
  $scope.name='张三';
  $scope.count=0;
  // 监听一个model 当一个model每次改变时 都会触发第2个函数
  $scope.$watch('name',function(newValue,oldValue){
    ++$scope.count;
    if($scope.count > 30){
      $scope.name = '已经大于30次了';
    }
  });
}

html代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div ng-app="">
    <div ng-controller="firstController">
      <input type="text" value="" ng-model="name"/>
      改变次数:{{count}}-{{name}}
    </div>
  </div>
  <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

运行效果如下:

前30次可以随意修改:

当修改了30次后,name固定为'已经大于30次了':

这就是watch的作用,model每一次改变时都会触发第二个函数。

(4)watch的第三个参数

当监听的为一个对象或者数组时,例如:

$scope.data = {
    name :'李四',
    count:20
  }

此时data里的name和count都要监听,那么可以这么写:

$scope.$watch('data',function(){
  },true)

如果不加第三个参数,那么只会监听data,只有当data引用改变时才会触发。

因此当需要监听一些引用对象需要把第三个参数设置成true。

总结

以上所述是小编给大家介绍的Angular中的$watch方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
layui实现三级导航菜单
Jul 26 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
node.js中使用Export和Import的方法
Sep 18 #Javascript
inner join 内联与left join 左联的实例代码
Sep 18 #Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 #Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 #Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 #Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 #Javascript
You might like
smarty模板中拼接字符串的方法
2014/02/14 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python构建深度神经网络(续)
2018/03/10 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
如何对python的字典进行排序
2020/06/19 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
顶撞领导检讨书
2014/01/29 职场文书
迟到早退检讨书
2014/02/10 职场文书
英语教育专业自荐信
2014/05/29 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
德劲DE1105机评
2022/04/05 无线电