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()生命周期伪代码示意图如下

Example

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

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();
});
});

<button ng-click="updateTime()">update time - ng-click

update time