AngularJS中的$watch()，$digest()和$apply()区分
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();
}
);
});以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- AngularJS 通过路由支持多视图应用， 可以根据路由动态加载所需的视图， 在 AngularJS 的文档中有详细的介绍， 网上也有不少教程， 就不用介绍了！随着视图的不断增加，js文件会越来越多，而 AngularJS 默认需要把全部的js都一次性...2015-10-21
- 这篇文章主要介绍了angularjs $http实现form表单提交示例，非常具有实用价值，需要的朋友可以参考下 ...2017-06-15
- 这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下...2017-05-22
- 这篇文章主要介绍了AngularJS实现Model缓存的方式，分享了多种AngularJS实现Model缓存的方法，感兴趣的小伙伴们可以参考一下...2016-02-05
- 这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料，感兴趣的小伙伴们可以参考一下...2016-07-06
- 本文主要介绍AngularJS 视图，这里整理了相关知识，并附代码示例和实现效果图，有兴趣的小伙伴可以参考下...2016-08-27
- 本文主要介绍AngularJS 依赖注入的知识，这里整理了相关的基础知识，并附示例代码和实现效果图，有兴趣的小伙伴可以参考下...2016-08-24
- angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一，下面通过本文给大家介绍AngularJs中route的使用方法和配置，感兴趣的朋友一起学习吧...2016-02-09
- 下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 任何时候，如果我们想要为请求添加全局功能，例如身份认证、错误处理等，在请求发送给服务器之前或服务器返回时对其进行拦截，是比较好的实现手段...2016-01-05
- 这篇文章主要为大家详细介绍了AngularJS内建服务$location及$location功能，感兴趣的小伙伴们可以参考一下...2016-07-06
Angularjs中如何使用filterFilter函数过滤
这篇文章主要介绍了Angularjs中如何使用filterFilter函数过滤的相关资料,需要的朋友可以参考下...2016-02-12- 这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-11-02
AngularJS使用ngOption实现下拉列表的实例代码
这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下...2016-01-25- AngularJS 让人爱不释手的八种功能，想知道AngularJS哪八种功能让人喜欢就快点看下本文吧...2016-03-28
- 本篇文章主要介绍了angularJS 指令封装回到顶部示例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-01-26
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
这篇文章主要介绍了AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下...2016-01-26- 这篇文章主要介绍了AngularJS中的指令实践指南(二)的相关资料,需要的朋友可以参考下...2016-03-22
- 这篇文章主要介绍了AngularJS 过滤器（自带和自建）详解的相关资料,需要的朋友可以参考下...2016-10-03