首先,我们利用angular在页面上输出当前的时间,这个并不难,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-app="">
<div ng-controller="firstController">
`date`
</div>
</div>
<script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>
var firstController = function($scope){ $scope.date = new Date(); }
此时页面会输出当前时间。
那么,现在有一个需求,要求时间每秒中更新一次。
我们把js代码改成如下:
var firstController = function($scope){ $scope.date = new Date(); setInterval(function(){ $scope.date = new Date(); },1000) }
在运行,发现页面并没有每秒刷新一次。那么在Model中变的时候,如何通知页面变化呢?
(1)什么是scope
scope是一个指向应用model的object,也是表达式的执行上下文,它被放置于一个类似应用的DOM结构的层次结构中。
(2)angular是怎么知道变量发生了改变
①要知道一个变量变了,方法不外乎两种
能通过固定的接口才能改变变量的值,比如说只能通过set()设置变量的值,set被调用时比较一下就知道了。这种方法的缺点是写法繁琐。
脏检查,将原对象复制一份快照,在某个时间,比较现在对象与快照的值,如果不一样就表明发生变化,这个策略要保留两份变量,而且要遍历对象,比较每个属性,这样会有一定性能问题。
②angular的策略
angular的实现是使用脏检查
不会脏检查所有的对象,当对象被绑定到html中,这个对象添加为检查对象(watcher)。
不会脏检查所有的属性,同样当属性被绑定后,这个属性会被列为检查的属性。
在angular程序初始化时,会将绑定的对象的属性添加为监听对象(watcher),也就是说一个对象绑定了N个属性,就会添加N个watcher。
③什么时候去脏检查
angular所有系统的方法中都会触发比较事件,比如:
controller初始化的时候,所有以ng-开头的时间执行后,都会触发脏检查。
因此,可以想到,在第一次加载页面时候,controller初始化的时候,会检查其中的date,进行第一次赋值。
而后setInterval每秒触发一次,此时date虽然变了,但是并没有触发脏检查,因此不会触发页面上的改变。
(3)手动触发脏检查
$apply仅仅只是进入angular context,然后通过$digest方法去触发脏检查
$apply如果不给参数的话,会检查该$scope里的所有监听的属性,推荐给上参数。
通过上面的说明,我们可以js代码改成如下:
var firstController = function($scope){ $scope.date = new Date(); setInterval(function(){ $scope.$apply(function(){ $scope.date = new Date(); //....会去触发脏检查 }) },1000) // 触发一次脏检查 }
此时,页面每个1秒会更新一次时间。
看一下$apply的代码:
$apply: function(expr) { try { beginPhase('$apply'); return this.$eval(expr); } catch (e) { $exceptionHandler(e); } finally { clearPhase(); try { $rootScope.$digest(); } catch (e) { $exceptionHandler(e); throw e; } } }
可以看到,$apply方法首先会通过$eval来解析里面的表达式,如果表达式有错会抛出错误,如果没有错误才会触发$digest方法。
(4)关于$digest()
其控制器所属的scope和其所有子scope的脏检查,脏检查又会触发$watch(),整个angular双向绑定机制就活了过来
这里不建议直接调用$digest(),而应该使用$apply,$apply其实不能把信直接送给$digest,之间还有$eval门卫把关,如果$apply带的表达式不合法,$eval会把错误交给$exceptionHandler,合法才会触发$digest,所有更安全。
转载于:https://blog.51cto.com/xlows/1425325