Angular事件循环
Angular的数据绑定是Angualr的基础,其实现依赖于3个函数:$watch、$digest、$apply。
1.$watch
- 模型监听器,监听数据模型的值变化并执行特定函数。
- 每一个数据绑定就注册一个watcher。
$scope.$watch('name', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
});
2.$digest
- 该方法会触发当前scope以及child scope中的所有watchers。
- 因为watcher的listener可能会改变model,所以$digest方法会一直触发watchers直到不再有listener被触发。
3.$apply
apply方法是对digest方法的进一层封装。
/**
* 更新$scope下的foo变量
*/
//方式一:
$scope.foo = "test";
$scope.$apply();
//方式二
$scope.$apply('foo = "test"');
//方式三
$scope.$apply(function(scope) {
scope.foo = 'test';
});
4.safeApply
在Angular的digest循环时使用$apply()会抛出异常,解决方法通常为自定义安全更新方法。安全更新方法使用了Angular内部的状态标识位$root.$$phase,该标识位用来标识Angular是否处于$digest更新状态。
$scope.safeApply = function(fn){
var phase = this.$root.$phase;
if (phase == '$apply' || phase == '$digest') {
if (fn && ( typeof (fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
}