這篇文章到底要講什么呢? 這必須要從栗子開始講起...
看下面這兩段代碼:
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.