何时在 AngularJS 中使用 $watch

Question

如果AngularJS自动为每个创建的模型（ng-model）创建一个手表，我需要知道为什么要使用$watch函数。

（当我说模型时，我指的是控制器中声明的值，如 `$scope.value = "somethign" edit-> 由 {{}} 附加到视图或ng-模型）

我的猜测是：

1) 当检测到模型发生变化时，创建复杂的操作很有用。不只是改变视图中的值。

2) 它用于将观察者添加到未作为模型与视图绑定的值。 （这可以解决，但这是一个好习惯吗？）

这只是我的猜测，我想知道我是否正确。

另外，如果有任何使用 $watch 的高级方法，请告诉。

谢谢。

Answer 1

正如你所说，Angular 为屏幕上的每个绑定创建一个 $watch。这包括ng-model 和{{ ... }}（以及ng-repeat 和其他指令）。

您希望何时创建自己的 $watch 函数？

您的第一个猜测是正确的。如果在模型更改时需要运行一些代码，则需要对其进行监视。

假设您有一个显示一些图表的指令，并且该指令通过属性接收一些数据。这个想法是在新数据到达时进行一些计算。你是怎样做的？你需要观察这些数据。当数据发生变化时，$watch 会触发并由您进行计算，然后更新 DOM。

查看示例here

您的第二点也很有用。 $watch 可以返回任何类型的代码，例如..

$scope.$watch(function() { return service.foo; }, function() { ... });

所以如果服务上的foo 发生变化，$watch 就会触发。在某些用例上可以派上用场。

Answer 2

AngularJS 不会自动创建监视函数，除非你（隐含地）告诉它这样做。这些隐式方法是通过以表达式语言将其添加到模板中或在指令中使用它。

此外，$scope.$watch 函数对于在值更改时运行一段代码非常有用。我不明白为什么应该将观察者添加到未绑定到视图的值。这通常会随着函数或当它被另一个正在监视的值触发时发生变化。这将是使用 $scope.$watch 的好例子。

在这个 SO-question 中阅读更多关于 AngularJS 的摘要循环以及 $watch 和 $apply 函数的信息： How do I use $scope.$watch and $scope.$apply in AngularJS?