Question

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

在许多情况下，这有点令人困惑，所以我很好奇，这是每个变体的利弊，何时我们应该使用$watch绑定，何时使用像ng-change这样的指令？

Answer 1

$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适用于模型。

Answer 2

ngChange指令代码：

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

猜猜是什么，ngChange需要来自ngModel的控制器，并在更改视图时执行绑定表达式。

所以它就像一个助手，可以帮助你避免执行像[$ watch'model'那样繁琐的任务]。

在性能方面，您可以减少一个$watch表达式。

Answer 3

ng-change等指令用于绑定到DOM的数据。在您的JS代码中使用$watch来监听更改。

如果您需要让DOM受到范围更改的影响，或者需要对DOM进行更改（例如字段选择）影响范围，则可以使用指令。

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

Answer 4

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

角度触发随$ watch vs ng-change，ng-checked等而变化

4 个答案: