49

目前我们可以通过多种方式监控数据变化。我们可以触发模型更改，$watch我们可以向元素添加指令并将一些操作绑定到它。

在很多情况下这有点令人困惑，所以我很好奇，每个变体的优缺点，我们应该什么时候使用$watch绑定，什么时候使用类似的指令ng-change？

4

4 回答 4

61

两者$watch都有ngChange完全不同的用法：

假设您在范围上定义了一个模型：

$scope.myModel = [
    {
        "foo":"bar"
    }
];

现在，如果您想在发生任何更改时做某事，myModel您可以使用$watch：

$scope.$watch("myModel", function(newValue, oldValue){
    // do something
});

ngChange是一个指令，当用户更改输入时将评估给定的表达式：

<select ng-model="selectedOption" ng-options="option for option in options" 
ng-change="myModel=selectedOption"></select>

简而言之，您通常会绑定ngChange到某个 HTML 元素。虽然$watch是模型。

于 2013-09-25T14:21:16.010 回答
16

ngChange指令代码：

var ngChangeDirective = valueFn({
  require: 'ngModel',
  link: function(scope, element, attr, ctrl) {
    ctrl.$viewChangeListeners.push(function() {
      scope.$eval(attr.ngChange);
    });
  }
});

猜猜看，当视图改变时，ngChange需要一个控制器ngModel并执行绑定表达式。

所以它就像一个帮手，让你免于执行 [$watch 'model' then do stuff] 之类的繁琐任务。

从性能的角度来看，您不必$watch担心一种表达方式。

于 2013-09-25T15:36:41.257 回答
8

类似的指令ng-change用于将数据绑定到 DOM。$watch在您的 JS 代码中用于侦听更改。

当您需要让 DOM 受到范围更改的影响，或者需要 DOM 中的更改（例如字段选择）影响范围时，您将使用指令。

如果您需要从范围更改触发 JavaScript 操作，例如 ajax 请求，那么您将$watch在控制器（或服务）中使用来监听更改。

于 2013-09-25T14:14:56.200 回答
2

如果您想要双向数据绑定，请使用ng-model. 这推动了从模型到视图以及从视图到模型的更改——两种方式。但是，如果您只想要从视图到模型的单向数据绑定，则使用ng-change. 如果您想要从模型到视图的简单单向数据绑定，可以使用表达式{{ like_this }}。但是，如果您想更多地控制模型在视图中的呈现方式，或者如果您想将模型绑定到视图以外的其他东西，那么使用$watch.

于 2016-06-09T15:46:35.913 回答