angular源码分析6-脏值检测实现

scope树状结构

angular内置一个 $rootScope服务，rootScope是angular作用范围的顶级作用域，也是作用域的源头。$rootScope可以产生子scope，子scope可以产生子scope，最终生成一个以rootScope为根节点的scope树。如下图所示：

 Scope是一个构造器函数，new Scope就创建了一个子作用域，并且这个子作用域是由其父作用域创建的。

下面用代码模拟实现一个scope是如何工作的，是如何实现数据绑定和脏值检测的。

脏值检测实现

指令的作用域是构造函数Scope的实例，即作用域是一个Scope实例化的对象。

$watch方法用来注册监听的作用于域的的值，当值发生变化时，执行相应的操作。

 

$digest方法用来触发某个scope对象脏值检测。脏值检测触发开始后，如果在一轮检测过程中，存在newVaule与oldValue不同，这一轮脏值检测结束后，会进入下一轮脏值检测，直到所有的newValue和oldValue值限公或执行的轮数超过指定的脏值检测最大的轮数，结束脏值检测。

$apply触发脏值检测，相比较$digest，（1）$apply先执行传入的参数（函数），$digest没有传参 （2）$apply然后从根节点触发脏值检测，使根作用域和其子作用域都进行脏值检测，$digest只是触发当前作用域的脏值检测 （3）最后，$apply返回传入的函数执行的结果。

使用实例

实例1

实例2（ng-bind）

ng-bind指令实现

如下angular内置的指令ng-bind，在链接阶段，执行postLink即函数ngBindLink时，对ng-bind的值监听注册，当ng-bind的值改变时，就更新ng-bind所属的元素的节点显示值。

ng-bind使用

html模板

自定myDirective指令，模板中使用了ng-bind指令。

浏览器上显示结果，显示了绑定的scope.color的值。

下面看一下scope.color第一次绑定到div的过程。

html文档加载完以后，开始调用angularInit方法初始化angular。执行1489行到第1492行代码，编译链接所有指令后，调用$apply触发脏值检测，从根作用域到所有子作用域都进行脏值检测，这样绑定的数据显示在view上。在定义ng-bind指令时，监听注册了ng-bind的值。在脏值检测时，scope.color有undefind变为'red'，值发生了改变，调用ngBindWatchAction监听函数，更新view的值，即ng-bind所属的div的值为red。