$watch对ngChange

Question

假设当$scope的属性发生变化时，您想要做一些事情。并表示该属性绑定到一个input字段。使用$watch和使用ngChange有什么优缺点？

html

<input ng-model="foo" ng-change="increment()">
<p>foo: {{foo}}</p>

<!-- I want to do something when foo changes.
     In this case keep track of the number of changes. -->
<p>fooChangeCount: {{fooChangeCount}}</p>

js

// Option 1: $watch
$scope.$watch('foo', function() {
  $scope.fooChangeCount++;
});

// Option 2: ngChange
$scope.fooChangeCount = 0;
$scope.increment = function() {
  $scope.fooChangeCount++;
};

http://plnkr.co/edit/4xJWpU6AN9HIp0OSZjgm?p=preview

我知道，有时需要使用$watch (如果要查看的值没有绑定到输入字段)。我了解到，有时需要使用ngChange (当您想要对输入中的更改进行响应，但不一定是响应范围属性更改时)。

但是，在这种情况下，两者完成了相同的任务。

我的想法：

• ngChange看起来更干净，更容易理解正在发生的事情。
• $watch看起来可能稍微快一些，但可能微不足道。使用ngChange，我认为Angular需要在编译阶段做一些额外的工作来设置事件侦听器，也许额外的事件侦听器会降低一些速度。不管您是否使用ngChange，摘要周期都运行在更改上，因此您有机会侦听某些内容并调用函数以响应更改。

Answer 1

底线--您可以通过$watch实现所有您可以通过ng更改实现的事情，但反之亦然。

目的：

ngChange -绑定到HTML元素 $watch -观察作用域的模型对象(包括HTML模型)

我的经验法则-如果您可以使用ng更改-使用它来匹配您的场景，否则使用$watch。

你为什么不使用$watch？

1. 它效率低下--增加了$digest的复杂性
2. 很难有效地测试
3. 不干净

Answer 2

你基本上都是对的。ng-change非常特定于DOM，用于在更改事件触发DOM元素时计算表达式。

然而，$watch是一个较低级别(更通用)的实用程序，它监视视图模型或$scope。因此，每次用户键入键(在输入示例中)时，您的监视功能都会触发。

相反，一个监听DOM事件，另一个监视您的数据。

Answer 3

$watch为$digest增加了更多的复杂性，降低了效率。在你的例子中，ngChange是一个更干净、更简单的解决方案.

字体：http://www.benlesh.com/2013/10/title.html