javascript - angular.js 如何检测模型已更改

Question

我很有趣，内部的 angular.js 如何检测到该模型已更改，以及处理此更改的一般 Angular 工作流程是什么。我的意思是，在我更改了模块的某些部分之后，页面上真正发生了什么。

Answer 1

这是我的理解。如果我错了，请纠正我。这是两种信息共享方式:)

如果您知道它实际上是如何工作的，那么数据绑定并不神奇。

为了使任何变量具有数据绑定功能，必须使用 $watch 方法进行注册。

$scope.$watch('aVarModel', function(newValue, oldValue) {
  //update the DOM with newValue
});

每当调用 $scope.$digest 时，都会检查所有这些通过 $watch 绑定的数据。请注意，Angular 不会检查范围内的所有值，而只会检查使用 $watch 方法注册的值。如果模型未使用 watcher 注册，则不会对其进行检查。它比较旧值和新值以检查是否有任何变化。如果它改变了，它会触发监听函数（watcher 方法的第二个参数）。

您可能会问您没有使用 $watch 在范围内注册任何变量或调用 $digest 来检查更改，但仍然会发生数据绑定。为什么？

AngularJS 有一堆内置指令，它们实际上调用了它背后的 $digest 方法并监视变量以使我们的工作更容易。例如：

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
     <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>

内置的 ng-model 指令实际上为 qty 和 cost 变量注册了观察者，并在每次值在我们不知道的情况下发生变化时调用 $scope.$digest。您可以创建自定义指令

忘了提一下，{{ }} 中的每个表达式也在编译阶段自动被监视。所以它会随着应用程序中任何地方的值的变化而变化。