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。