myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval(function(){ $scope.$apply(function(){ scope.date = new Date(); }) },1000) })
Scope提供$watch方法監視Model的變化。
Scope提供$apply方法傳播Model的變化。
AngularJS提供了一個非常酷的特性叫做雙向數據綁定(Two-way Data Binding),這個特性大大簡化了我們的代碼編寫方式。數據綁定意味着當View中有任何數據發生了變化,那么這個變化也會自動地反饋到scope的數據上,也即意味着scope模型會自動地更新。類似地,當scope模型發生變化時,view中的數據也會更新到最新的值。那么AngularJS是如何做到這一點的呢?當你寫下表達式如{{ aModel }}時,AngularJS在幕后會為你在scope模型上設置一個watcher,它用來在數據發生變化的時候更新view。這里的watcher和你會在AngularJS中設置的watcher是一樣的:
$scope.$watch('aModel', function(newValue, oldValue) { //update the DOM with newValue });
傳入到$watch()中的第二個參數是一個回調函數,該函數在aModel的值發生變化的時候會被調用。當aModel發生變化的時候,這個回調函數會被調用來更新view這一點不難理解,但是,還存在一個很重要的問題!AngularJS是如何知道什么時候要調用這個回調函數呢?換句話說,AngularJS是如何知曉aModel發生了變化,才調用了對應的回調函數呢?它會周期性的運行一個函數來檢查scope模型中的數據是否發生了變化嗎?好吧,這就是$digest循環的用武之地了。
在$digest循環中,watchers會被觸發。當一個watcher被觸發時,AngularJS會檢測scope模型,如何它發生了變化那么關聯到該watcher的回調函數就會被調用。那么,下一個問題就是$digest循環是在什么時候以各種方式開始的?
在調用了$scope.$digest()后,$digest循環就開始了。假設你在一個ng-click指令對應的handler函數中更改了scope中的一條數據,此時AngularJS會自動地通過調用$digest()來觸發一輪$digest循環。當$digest循環開始后,它會觸發每個watcher。這些watchers會檢查scope中的當前model值是否和上一次計算得到的model值不同。如果不同,那么對應的回調函數會被執行。調用該函數的結果,就是view中的表達式內容(譯注:諸如{{ aModel }})會被更新。除了ng-click指令,還有一些其它的built-in指令以及服務來讓你更改models(比如ng-model,$timeout等)和自動觸發一次$digest循環。
目前為止還不錯!但是,有一個小問題。在上面的例子中,AngularJS並不直接調用$digest(),而是調用$scope.$apply(),后者會調用$rootScope.$digest()。因此,一輪$digest循環在$rootScope開始,隨后會訪問到所有的children scope中的watchers。
現在,假設你將ng-click指令關聯到了一個button上,並傳入了一個function名到ng-click上。當該button被點擊時,AngularJS會將此function包裝到一個wrapping function中,然后傳入到$scope.$apply()。因此,你的function會正常被執行,修改models(如果需要的話),此時一輪$digest循環也會被觸發,用來確保view也會被更新。
Note: $scope.$apply()會自動地調用$rootScope.$digest()。$apply()方法有兩種形式。第一種會接受一個function作為參數,執行該function並且觸發一輪$digest循環。第二種會不接受任何參數,只是觸發一輪$digest循環。我們馬上會看到為什么第一種形式更好。
什么時候手動調用$apply()方法?
如果AngularJS總是將我們的代碼wrap到一個function中並傳入$apply(),以此來開始一輪$digest循環,那么什么時候才需要我們手動地調用$apply()方法呢?實際上,AngularJS對此有着非常明確的要求,就是它只負責對發生於AngularJS上下文環境中的變更會做出自動地響應(即,在$apply()方法中發生的對於models的更改)。AngularJS的built-in指令就是這樣做的,所以任何的model變更都會被反映到view中。但是,如果你在AngularJS上下文之外的任何地方修改了model,那么你就需要通過手動調用$apply()來通知AngularJS。這就像告訴AngularJS,你修改了一些models,希望AngularJS幫你觸發watchers來做出正確的響應。
比如,如果你使用了JavaScript中的setTimeout()來更新一個scope model,那么AngularJS就沒有辦法知道你更改了什么。這種情況下,調用$apply()就是你的責任了,通過調用它來觸發一輪$digest循環。類似地,如果你有一個指令用來設置一個DOM事件listener並且在該listener中修改了一些models,那么你也需要通過手動調用$apply()來確保變更會被正確的反映到view中。
可以參考:http://blog.csdn.net/dm_vincent/article/details/38705099