Как angular.js обнаружил, что модель была изменена

Question

Мне интересно, как угловая.js внутри обнаруживает, что модель была изменена, и что является общим угловым рабочим процессом для обработки этих изменений. Я имею в виду, что на самом деле произошло на странице после того, как я сменил часть моего модуля.

Answer 1

Это мое понимание. Поправьте меня, если я ошибаюсь. Это двухсторонний обмен информацией :)

Связывание данных не является волшебным, если вы знаете, как оно работает.

Для того чтобы любые переменные имели функции привязки данных, их необходимо зарегистрировать с использованием метода $ watch.

$scope.$watch('aVarModel', function(newValue, oldValue) { 
    //update the DOM with newValue 
}); 

Все эти привязанные данные через $ watch будут проверяться всякий раз, когда $ scope вызывается $ digest. Обратите внимание, что Angular не проверяет все значения в области видимости, а вместо этого только те, которые регистрируются с использованием методов $ watch. Если модель не зарегистрирована с использованием наблюдателя, она не будет проверена. Он сравнивает старые значения и новые значения, чтобы проверить, не изменилось ли какое-либо из них. Если он изменится, он вызовет функцию слушателя (второй параметр метода наблюдателя).

Вы можете спросить, что вы не зарегистрировали какую-либо переменную в области видимости с помощью $ watch или call $ digest, чтобы проверить изменения, но происходит привязка данных. Зачем?

У AngularJS есть куча встроенных директив, которые фактически называет метод $ digest за ним и смотрят переменную, чтобы сделать нашу работу намного проще. Например:

<div ng-app ng-init="qty=1;cost=2"> 
    <b>Invoice:</b> 
    <div> 
    Quantity: <input type="number" min="0" ng-model="qty"> 
    </div> 
    <div> 
    Costs: <input type="number" min="0" ng-model="cost"> 
    </div> 
    <div> 
    <b>Total:</b> {{qty * cost | currency}} 
    </div> 
</div> 

Встроенный в нг-модели директивы фактически регистрировать наблюдателей для Qty и стоимостных переменных и вызов $ объема $ переваривать каждый раз при изменении значения не мы его знаем.. Вы можете создавать настраиваемые директивы

Вспомните, что каждое выражение внутри {{}} также автоматически просматривается на этапе компиляции. Таким образом, он будет меняться, поскольку значение его изменяется в любом месте приложения.