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

AngularJS数据绑定解析

最新推荐文章于 2019-05-05 22:11:48 发布

原创最新推荐文章于 2019-05-05 22:11:48 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨AngularJS的数据绑定机制，解释其工作原理与潜在缺陷，并通过实例展示如何正确使用$apply方法确保视图更新。

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>