Почему $ doCheck вызывается дважды, когда меняется представление, и что я могу с этим поделать?

Question

В следующем коде Angular 1.7.5 я подключаю текстовое поле к определенному полю контроллера с помощью ng-model и использую $doCheck, чтобы что-то делать при каждом изменении значения.Обратите внимание, что в моем реальном проекте значение, которое я наблюдаю, является объектом, и мне нужно выяснять всякий раз, когда изменяется любое из его полей, поэтому я должен использовать $doCheck.Я знаю, что это избыточно для текстового поля.

HTML

<div ng-app="app" ng-controller="TheController as ctrl">
    <input ng-model="ctrl.value" />
</div>

JS

angular.module("app", [])
   .controller("TheController",
   class TheController
   {
       constructor()
       {
           this.value = "";
       }

       $doCheck()
       {
           console.log("check: " + this.value);
       }
   }
);

Всякий раз, когда значение в текстовом поле изменяется, вы можете видеть, что $doCheckвызывается дважды (оба раза с новым значением).Почему это?Как я могу отфильтровать "бессмысленные" $doCheck вызовы и просто получить те, где значение действительно изменилось?

Answer 1

Цикл $ digest продолжает повторяться, пока модель не стабилизируется, что означает, что очередь $ evalAsync пуста и $список наблюдения не обнаруживает никаких изменений.

Это означает, что $doCheck будет вызываться как минимум два раза .Один раз, чтобы обнаружить изменения и еще раз, чтобы обнаружить, что нет новых изменений.Если в список $evalAsync добавлено больше изменений или функций.Он будет вызываться снова и снова до предела, установленного $rootScopeProvider.digestTtl(limit).

При обнаружении изменений необходимо сохранить предыдущие значения для сравнения с текущими значениями.

this.$doCheck = function() {
    var newValue;
    var oldValue;
    oldValue = newValue;
    newValue = itemOfInterest();
    if (newValue != oldValue) {
       //Code to act on changes
    };
};

Для получения дополнительной информации см.

• AngularJS Developer Guide - интеграция с циклом событий браузера
• AngularJS $ compile ServiceСправочник по API - Крючки жизненного цикла