在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个周期进行评估，因此每次更改时，Angular都会检查页面上的每个{{}}和ng-bind，因此当您{{ pigLatin() }}时1}}然后输入input a $digest被触发，您的功能将再次执行。

有关$digest周期here的更多信息。

Answer 2

实际上很简单。

当视图中有{{ pigLatin() }}时，angular会在该表达式上创建一个“观察者”，并且该观察者的责任是在表达式值更改时更改DOM（即HTML页面中的文本）

在输入中键入内容时，会调用角度事件侦听器。侦听器更新范围的s属性，并调用$scope.$apply()。

这将评估所有观察到的表达式，包括表达式"pigLatin()"。评估该表达式包括调用函数pigLatin()。如果函数返回的值与最后一个值不同，则调用该表达式的观察者，并更新DOM。

the manual中解释了这一点。