В настоящее время мы можем отслеживать изменения данных несколькими способами. Мы могли бы инициировать изменения модели с помощью $watch, и мы могли бы добавить директивы к элементам и связать с ней некоторые действия.
Во многих случаях это немного запутывает, поэтому мне любопытно, что это за и против каждого варианта, и когда мы должны использовать привязку $watch, а когда директивы типа ng-change?
Оба $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 для моделей.
Код директивы 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, о котором нужно беспокоиться.
Директивы типа ng-change используются для привязки данных к DOM. $watch используется в вашем JS-коде для прослушивания изменений.
Если вам нужно, чтобы на DOM повлияло изменение вашей области действия или вам нужно изменить изменения DOM (например, поле), вы должны использовать директиву.
Если вам нужно вызывать действия JavaScript из изменения области видимости, например, запрос ajax, то вы должны использовать $watch в своем контроллере (или услуге) для прослушивания изменений.
Если вы хотите привязку двухсторонней передачи данных, используйте ng-model. Это подталкивает изменения от модели к представлению и от представления к модели - двумя способами. Однако, если вы просто хотите привязать одностороннюю привязку данных к представлению модели, используйте ng-change. Если вам нужна простая односторонняя привязка данных к модели для просмотра, вы можете использовать выражение {{ like_this }}. Но если вы хотите гораздо больше контролировать, как модель отображается в представлении, или если вы хотите привязать модель к чему-то, кроме представления, используйте $watch.