Зачем нам нужен $ scope.apply (), если мы делаем изменения из консоли, а не иначе?

Question

Скажем, есть контроллер AngularJS, подобный этому:

var module = angular.module('myApp', []);

module.controller('TimeCtrl', function($scope, $interval) {
  var tick = function() {
    $scope.clock = Date.now();
    window.scope = $scope;
  }
  tick();
  $interval(tick, 1000);
});

1. Изменение $scope.clock автоматически отразится в DOM.Однако, когда я делаю это в консоли, мне нужно явно сделать $scope.apply.Почему это так?$interval совершает какое-то волшебство?
2. В общем, разве мне не нужно $scope.watch эти переменные?Я думал, что цель $scope.watch заключалась в следующем.

Answer 1

Почему это так?$interval творил магию?

Да, это так.Он автоматически запускает цикл дайджеста AngularJS , что вы делаете «вручную» с помощью $scope.$apply() (что также вызывает его).Это приводит к тому, что изменения отражаются в DOM.Если цикл дайджеста не запущен, AngularJS "не знает, какие изменения были внесены в модель, поэтому он не обновляет DOM".

(...) мне не нужносмотреть эти переменные?

Нет, если только вам не нужно получать уведомление, когда какая-либо из этих переменных изменила свои значения.Пока вы делаете все изменения в области видимости AngularJS, DOM всегда будет «уведомляться» (обновляться).

Как узнать, когда я что-то делаю в области видимости AngularJS?

Обычнокогда вы используете функции, предоставляемые такими службами, как $interval и $timeout, вы делаете вещи внутри области действия, потому что это обертки оригинала (setInterval и setTimeout) и автоматически запускать упомянутый цикл дайджеста, синхронизируя вещи между моделью и DOM.

Итак, наконец ,

Зачем нам нужно $scope.apply() при изменении с консоли, но не иначе?

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

Answer 2

1.

$interval(f, time)

больше или меньше

setInterval(function() {
   f();
   $rootScope.$apply();
}, time)

2.

<div>{{test}}</div>

больше или меньше

$scope.$watch('test', function(value) {
  divElement.innerHTML = value;
})