Как я могу использовать $scope.$ watch и $scope.$применить в AngularJS?

в AngularJS мы обновляем наши модели, а наши представления/шаблоны обновляют DOM "автоматически" (через встроенные или пользовательские директивы).

$apply и $watch, оба метода Scope, не связаны с DOM.

The концепции страница (раздел "Runtime") имеет довольно хорошее объяснение цикла $digest, $apply, очереди $evalAsync и списка $watch. Вот картинка, которая сопровождает текст:

все код имеет доступ к области-обычно контроллеры и директивы (их функции связи и / или их контроллеры) – можно настроить "watchExpression " что AngularJS будет оценивать против этой области. Эта оценка происходит всякий раз, когда AngularJS входит в свой цикл $digest (в частности, цикл "$watch list"). Вы можете посмотреть его отдельных свойств объема, можно определить функцию, чтобы смотреть вместе два свойства, можно посмотреть длину массива, и т. д.

когда все происходит "внутри AngularJS" -например, вы вводите в текстовое поле, в котором включена двусторонняя привязка данных AngularJS (т. е. использует ng-модель), срабатывает обратный вызов $http и т. д. - $apply уже был вызван, поэтому мы находимся внутри прямоугольника "AngularJS" на рисунке выше. Все выражения watchExpressions будут оцениваться (возможно, более одного раза-до тех пор, пока не будут обнаружены дальнейшие изменения).

когда что-то происходит "вне AngularJS – - например, вы использовали bind() в директиве, а затем это событие срабатывает, в результате чего ваш обратный вызов вызывается, или некоторые зарегистрированные jQuery обратные вызовы-мы все еще находимся в "родном" прямоугольнике. Если код обратного вызова изменяет все, что наблюдает любой $ watch, вызовите $apply, чтобы попасть в прямоугольник AngularJS, заставляя цикл $digest выполняться, и, следовательно, AngularJS заметит изменение и сделает свою магию.

этот блог было охвачено все, что создает примеры и понятные объяснения.

The AngularJS $scope функции $watch(), $digest() и $apply() некоторые из центральных функций в AngularJS. Понимание $watch(),$digest() и $apply() имеет важное значение для того, чтобы понять AngularJS.

когда вы создаете привязку данных откуда-то в своем представлении к переменной на объекте $scope, AngularJS создает "часы" внутри. Часы означает, что AngularJS наблюдает за изменениями в переменной на $scope object. Фреймворк "наблюдает"за переменной. Часы создаются с помощью $scope.$watch() функция, которую я рассмотрю позже в этом тексте.

в ключевых точках вашего приложения AngularJS вызывает

AngularJS расширяет это событий-цикл, создавая что-то под названием AngularJS context.

$watch ()

каждый раз, когда вы связываете что-то в пользовательском интерфейсе вы вставляете $watch на $watch список.

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

вот и мы $scope.user, который привязан к первому входу, и у нас есть $scope.pass, который привязан ко второму. При этом мы добавляем два $watch es к $watch список.

когда наши шаблон загружается, он же в фазе связывания, компилятор будет искать каждую директиву и создает все $watches, которые необходимы.

AngularJS обеспечивает $watch,$watchcollection и $watch(true). Ниже приведена аккуратная диаграмма, объясняющая все три взятые из наблюдателей глубина.

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
  });

  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
  });

  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
  }, true);

  $timeout(function(){
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();

     console.log("Triggers $watchCollection and $watch(true)")
     $scope.users.push({ name: 'Thalaivar'});
     $scope.$digest();

     console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}

http://jsfiddle.net/2Lyn0Lkb/

$digest цикл

когда браузер получает событие, которое может управляться контекстом AngularJS $digest цикл будет уволен. Эта петля состоит из двух меньших петель. Один обрабатывает $evalAsync очередь, а другой обрабатывает $watch list. Элемент $digest будет цикл по списку $watch что мы есть

app.controller('MainCtrl', function() {
  $scope.name = "vinoth";

  $scope.changeFoo = function() {
      $scope.name = "Thalaivar";
  }
});

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

здесь у нас только один $watch потому что ng-click не создает никаких часов.

нажимаем кнопку.

1. браузер получает событие, которое войдет в контекст AngularJS
2. The $digest цикл будет работать и будет запрашивать каждые $watch для изменений.
3. с $watch, который наблюдал за изменениями в $охвата.название сообщает об изменении, оно заставит другого $digest петли.
4. новый цикл ничего не сообщает.
5. браузер возвращает элемент управления, и он обновит DOM отражая новое значение $scope.name
6. здесь важно то, что каждое событие, которое входит в контекст AngularJS, будет запускать $digest петли. Это означает, что каждый раз, когда мы пишем письмо на входе, цикл будет запускать проверку каждого $watch в этой странице.

$apply ()

если вы называете $apply когда событие срабатывает, он будет идти через угловой контекст, но если вы его не назовете, он будет работать вне его. Это так просто. $apply будем называть $digest() цикл внутри, и он будет повторяться по всем часам, чтобы гарантировать, что DOM обновляется с недавно обновленным значением.

The $apply() метод вызовет наблюдателей на весь $scope цепи а $digest() метод будет вызывать только наблюдателей на текущий $scope и children. когда никто из вышестоящих $scope объекты должны знать о локальных изменениях, вы можете использовать $digest().

здесь $watchGroup и $watchCollection Как хорошо. В частности, $watchGroup действительно полезно, если вы хотите вызвать функцию для обновления объекта, который имеет несколько свойств в представлении, которое не является объектом dom, например, другое представление в canvas, webGL или запросе сервера. Вот, документация ссылке.

Я нашел очень глубокие видео, которые охватывают $watch,$apply,$digest и дайджест циклов в:

• AngularJS-понимание наблюдателя, $watch, $watchGroup, $watchCollection, ng-change

• в AngularJS - понимание дайджест цикла (фаза переварить процесса или усвоить или переварить петли)

• Учебник AngularJS - Понимание $apply и $digest (подробно)

Ниже приведены несколько слайдов, используемых в этих видео, чтобы объяснить концепции (на всякий случай, если вышеуказанные ссылки удалены/не работают).

на изображении выше, " $ scope.c " не просматривается, поскольку он не используется ни в одной из Привязок данных (в разметке). Два других ($scope.a и $scope.b) будет смотрели.

из приведенного выше изображения: на основе соответствующего события браузера AngularJS захватывает событие, выполняет цикл дайджеста (проходит через все часы для изменений), выполняет функции часов и обновляет DOM. Если нет событий браузера, цикл дайджеста можно запустить вручную с помощью $apply или $digest.

подробнее о $apply и $digest:

просто дочитайте все вышесказанное, скучно и сонно (извините, но это правда). Очень технический, глубокий, подробный и сухой. Почему я пишу? Поскольку AngularJS является массивным, множество взаимосвязанных концепций может заставить любого сходить с ума. Я часто спрашивал себя: неужели я недостаточно умен, чтобы понять их? Нет! Это потому, что так мало может объяснить технологию в for-dummie language без всякой терминологии! Хорошо, позвольте мне попробовать:

1) все они управляются событиями вещи. (Я слышу смех, но читайте дальше)

Если вы не знаете, что такое event-driven, то думаю, вы поместите кнопку на странице подключите его с помощью функции "on-click", ожидая пользователи нажимают на него, чтобы вызвать действия, которые вы устанавливаете внутри функция. Или подумайте о "триггере" SQL Server / Oracle.

2) $ watch-это "on-click".

что особенного в том, что он принимает 2 функции как параметры, первый дает значение из события, Второй принимает значение в рассмотрение...

3) $digest-это босс, который неустанно проверяет, бла-бла-бла но хороший босс.

4) $apply дает вам способ, когда вы хотите сделать это вручную, как отказоустойчивый (в случае, если on-click не срабатывает, вы заставляете его работать.)

теперь давайте сделаем его визуально. Представьте это, чтобы сделать его еще более легким возьмите идею:

в ресторане

- официанты должны принимать заказы от клиентов, это

$watch(
  function(){return orders;},
  function(){Kitchen make it;}
);

- руководителя бег вокруг, чтобы убедиться, что все официанты бодрствуют, реагируя на любые признаки изменений от клиентов. Это $digest()

- собственником имеет максимальную власть, чтобы управлять всеми по запросу, это $apply()