AngularJS: автоматично виявляє зміну моделі

Припустимо, я хотів зробити щось на кшталт автоматичного запуску якогось коду (наприклад, збереження даних на сервері) кожного разу, коли значення моделі змінюються. Є єдиний спосіб зробити це, встановивши ng-changeна кожному елементі управління щось подібне, що могло б змінити модель?

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

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

як ти можеш побачити щось подібне до хребта.

У переглядах із {{}}та / або ng-моделлю Angular встановлює $watch()ес для вас за кадром.

За замовчуванням $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

Ура!