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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
javascript动态加载二
Aug 22 Javascript
js动态为代码着色显示行号
May 29 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
推荐dojo学习笔记
2007/03/24 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
电气专业应届生求职信
2013/11/01 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
顶岗实习计划书
2015/01/16 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
小学总务工作总结
2015/08/13 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
Python中可变和不可变对象的深入讲解
2021/08/02 Python