AngularJS: автоматически обнаруживать изменение модели

Предположим, я хотел сделать что-то вроде автоматического запуска некоторого кода (например, сохранения данных на сервер) при изменении значений модели. Есть ли единственный способ сделать это, установив что-то подобное ng-changeдля каждого элемента управления, который мог бы изменить модель?

То есть, с представлениями все меняется сразу же, как и модель, без необходимости явно что-либо подключать. Есть ли аналог возможности запускать код, который сохраняет на сервере? Что-то вроде

myModel.on('change', function() {
  $.post("/my-url", ...);
});

как вы могли бы видеть с чем-то вроде позвоночника.

В представлениях с {{}}и / или ng-моделью Angular настраивает $watch()es за вас за кулисами.

По умолчанию $watchсравнивает по ссылке. Если установить третий параметр $watchв true, Угловой будет вместо «мелкого» наблюдать объект для изменения. Для массивов это означает сравнение элементов массива, для карт объектов это означает просмотр свойств. Итак, это должно делать то, что вы хотите:

$scope.$watch('myModel', function() { ... }, true);

Обновление : Angular v1.2 добавил новый метод для этого, `$ watchCollection () :

$scope.$watchCollection('myModel', function() { ... });

Обратите внимание, что слово «неглубокое» используется для описания сравнения, а не «глубокое», поскольку ссылки не отслеживаются - например, если наблюдаемый объект содержит значение свойства, которое является ссылкой на другой объект, эта ссылка не используется для сравнения. другой объект.

И если вам нужно динамически стилизовать элементы формы в соответствии с их состоянием (изменено / не изменено) или проверить, действительно ли изменились некоторые значения, вы можете использовать следующий модуль, разработанный мной: https://github.com/betsol / угловой-ввод-изменен

Он добавляет к форме и ее дочерним элементам дополнительные свойства и методы. С его помощью вы можете проверить, содержит ли какой-либо элемент новые данные или даже проверить, есть ли новые несохраненные данные во всей форме.

Вы можете настроить следующие часы: $scope.$watch('myForm.modified', handler)и ваш обработчик будет вызываться, если некоторые элементы формы действительно содержат новые данные или если он вернулся в исходное состояние.

Кроме того, вы можете использовать modifiedсвойство отдельных элементов формы, чтобы фактически уменьшить объем данных, отправляемых на сервер через вызов AJAX. Нет необходимости отправлять неизмененные данные.

В качестве бонуса вы можете вернуть форму в исходное состояние с помощью вызова reset()метода формы .

Вы можете найти демонстрацию модуля здесь: http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

Ура!