angular控制器的执行顺序和服务的注入情况

这篇文章到底要讲什么呢? 这必须要从栗子开始讲起...

看下面这两段代码:

demo1: http://jsfiddle.net/ujzmvp3j/1/

demo2: http://jsfiddle.net/m2d2b6qL/

'foo',服务中有一个name属性,它分别被注入到ctrlOne和ctrlTwo两个控制器中,然后在ctrlOne控制器里对name属性进行了修改.根据 angular五种服务详解 里所说的,服务的实例是一个引用对象,在一个地方修改它,其它地方也会变化.

所以,当在ctrlOne里面修改了name,ctrlTwo里面的name也变化了.

但是demo2,我们把两个div调换顺序:

可以看到,虽然js代码一样,修改了ctrlOne里面的name属性,但是视图的控制器Two里没有变化.

原因如下:

js书写控制器的顺序无所谓,它不会立刻实例化这些控制器,也不会在加载js以后就执行控制器里的代码,也不会注入服务和指令. 当解析html的时候,它的ng-controller遇到什么控制器,它就去实例化哪个控制器.这个时候,控制器里面的代码才会被执行到,服务等依赖也在这个时间被注入.

 

demo1里,html的顺序是 ng-controller='ctrlOne', ng-controller='ctrlTwo' 的时候,ctrlOne控制器就被实例化了,同时foo服务的实例也被注入了,然后在控制器里面修改foo服务的实例,再然后html继续向下解析,解析到ctrlTwo,这个时候,ctrlTwo控制器也被实例化,foo服务的实例又被注入到ctrlTwo里,但是这时,foo服务实例的name属性已经被修改过了,所以ctrlTwo的$scope下的name属性值就是被修改过后的name值了.

 

demo2里,html的顺序反过来,导致ctrlTwo先实例化,ctrlOne后实例化,所以,在ctrlOne里修改name属性值,ctrlTwo里是不会被同步的,如果要同步监测变化,需要像 angular五种服务详解 里面的栗子一样,使用$watch.