AngularJS中的$watch(),$digest()和$apply()区分


Posted in Javascript onApril 04, 2016

AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数。

在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个"Watch"。"Watch"用于监听AngularJS scope中变量的改变。可以通过调用$scope.$watch()这个方法来创建"Watch"。

$scope.$digest()函数会循环访问所有的watches,并检测其所监听的$scope中的变量是否改变。如果变量发生改变,会调用该变量对应的监听函数。监听函数可以实现很多操作,比如让html里面的text文本显示最新的变量值。可见,$scope.$digest是可以触发数据绑定更新的。

大部分情况下,AngualrJS会自动调用$scope.$watch()和$scope.$digest()函数,但是在某些情况下,我们需要手动调用他们,因此,有必要了解他们是怎么工作的。

$scope.$apply()这个函数会先执行一些代码,之后在调用$scope.$digest()。所有的watches会被检测一次,相应的监听函数也会被执行。$scope.$apply()在AngularJS与其它javascript代码集成时是很有用的。

接下来我们具体的讲解下$watch(), $digest() 和 $apply()。

$watch()
$watch(watchExpression, listener, [objectEquality])

watchExpression:监听对象,可以是string或者function(scope){}

listener:监听对象发生改变时执行的回调函数function(newVal,oldVal,scope){}

objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化。如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。(默认值:false)

$digest()
检测当前scope以及子scope中所有的watches,因为监听函数会在执行过程中修改model(scope中的变量),$digest()会一直被调用直到model没有再变。当调用超过10次时,$digest()会抛出一个异常"Maximum iteration limit exceeded',以此来防止程序进入一个死循环。

$apply()
$apply([exp])

exp:string或者function(scope){}

$apply()生命周期伪代码示意图如下

function $apply(expr) {
 try {
  return $eval(expr);
 } catch (e) {
  $exceptionHandler(e);
 } finally {
  $root.$digest();
 }
}

Example
下面我们通过一个例子来说明$watch,$digest和$apply。

<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController", function($scope) {
  $scope.data = { time : new Date() };
  $scope.updateTime = function() {
    $scope.data.time = new Date();
  }
   
  document.getElementById("updateTimeButton")
      .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
  });
});
</script>
<body ng-app="myapp">
<div ng-controller="myController">
  {{data.time}}
 
  <br/>
  <button ng-click="updateTime()">update time - ng-click</button>
  <button id="updateTimeButton" >update time</button>
</div>
</body>

这段代码会绑定$scope.data.time到HTML中显示出来,同时这个绑定会自动创建一个watch来监听$scope.date.time的变化。此外,这里还有2个按钮,第一个按钮是通过ng-click Directive来调用$scope.updateTime方法,之后AngularJS会自动执行$scope.$digest()使最新的时间显示到HTML中。第二个按钮是通过javascript代码添加一个点击事件,以此来更新HTML中的时间。但是第二个按钮是不能工作的,它的解决办法是在点击事件的最后手动的去调用$scope.$digest()方法,如下:

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  console.log("update time clicked");
  $scope.data.time = new Date();
  $scope.$digest();
});

另外一个解决办法是调用$scope.$apply(),如下:

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  $scope.$apply(function(){
      console.log("update time clicked");
      $scope.data.time = new Date();
    }
  );
});

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 #Javascript
jQuery中的Deferred和promise 的区别
Apr 03 #Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 #Javascript
jQuery qrcode生成二维码的方法
Apr 03 #Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 #Javascript
AngularJs 60分钟入门基础教程
Apr 03 #Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 #Javascript
You might like
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python 常用string函数详解
2016/05/30 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python自动发邮件脚本
2017/03/31 Python
python实现类之间的方法互相调用
2018/04/29 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Python对象与引用的介绍
2019/01/24 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
运动会演讲稿
2014/05/07 职场文书
白岩松演讲
2014/05/21 职场文书
市场部岗位职责范本
2015/04/15 职场文书
小学语文教学反思范文
2016/03/03 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android