在AngularJS中，如何在模型更改時觸發$ scope.someFunction？

Question

我想我可以理解AngularJS的雙向綁定：$scope.foo觀察<input type="text" ng-model="foo">和<input>或{{ foo }}也觀察$scope.foo以及。

但是那些使用$scope.foo的功能和{{ bar() }}中使用的功能怎麼樣 - 誰在觀察誰的原則是什麼？

---

實施例： https://jsfiddle.net/rt07o7sL/

<p>{{ pigLatin() }}</p> 

<input type="text" ng-model="s" style="width: 600px"> 

JavaScript的：

$scope.s = "type some more here"; 
$scope.pigLatin = function() { 
    return $scope.s + " ey ey"; 
} 

在此，當輸入框的內容被改變（由用戶打字），$scope.s將得到改變，不管怎樣它觸發pigLatin()。

Answer 1

{{}}表達式將被評估每$digest週期，所以每次有新的變化角度將檢查每一個{{}}和ng-bind在頁面上，所以當你{{ pigLatin() }}，你在input一個$digest輸入被觸發，你的功能將被執行再次。

有關$digest週期的更多信息here。

Answer 2

其實很簡單。

如果在視圖中有{{ pigLatin() }}，則angular會在該表達式上創建一個「觀察者」，並且此觀察者的責任是在表達式值更改時更改DOM（即HTML頁面中的文本）。

當您在輸入中鍵入內容時，會調用角度事件偵聽器。監聽者更新示波器的s屬性，並調用$scope.$apply()。

這將評估所有觀看的表達式，包括表達式"pigLatin()"。評估該表達式包括調用函數pigLatin()。如果函數返回的值與最後一個不同，則調用該表達式的觀察者，並更新DOM。

這在the manual中有解釋。