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