理解Angular中的$apply()以及$digest()

来源：互联网发布：ping 域名请求超时编辑：程序博客网时间：2024/06/10 16:21

AngularJS数据绑定的原理&最大缺陷：每一次方向1的绑定都会在$digest队列中生成一个执行DOM操作的函数（若一个ngApp中有N次数据绑定就会生成N个这样的函数），只要某一个Model数据发生了值的改变，立即会自动执行$digest队列中的每一个函数，进行View的更新。
当$digest循环开始后，它会触发每个watcher。这些watchers会检查scope中的当前model值是否和上一次计算得到的model值不同。如果不同，那么对应的回调函数会被执行。

什么时候手动调用$apply()方法？
如果你在angularjs上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()来通知AngularJS。这就像告诉AngularJS，你修改了一些models，希望AngularJS帮你触发watchers来做出正确的响应。

以一个例子来说明一下：

html + js：

<!DOCTYPE THML>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/JavaScript" src="angular.js"></script>
<style>
.header-fixed{
position: fixed;
top: 0;
left: 0;
right: 0
}
</style>
</head>
<body ng-controller="dome">
<header style="background: #ddd;height: 150px;" ng-class="{'header-fixed':add}">
<h3>顶部导航{{add}}</h3>
</header>
<script type="text/javascript">
angular.module("test",["ng"]).controller("dome",function($scope){
var doc = angular.element(document);
doc.bind("scroll",function(){
if(document.body.scrollTop>150){
// $scope.$apply(function(){
$scope.add = true;
console.log($scope.add);
// })
}else{
// $scope.$apply(function(){
$scope.add = false;
console.log($scope.add);
// })
}
})
})
</script>
</body>
</html>

当执行以上代码时候，滚动页面是控制台输出$scope.add的值是有的，但是页面却没有被修改，原因也许你已经知道了，就是我们忘了调用$apply()方法。当解开注释调用$scope.$apply方法手动修改$scope.add的值，页面中想要添加的class才能渲染上去。

Note:顺便提一下，你应该使用$timeout service来代替setTimeout()，因为前者会帮你调用$apply()，让你不需要手动地调用它。

阅读全文

0 0