분명히 Scope부착 된 객체에 변화가 있는지 정기적으로 점검하지 않습니다 . 범위에 연결된 모든 개체가 감시되는 것은 아닙니다. 스코프는 프로토 타입으로 $$ watchers를 유지합니다 . 이 호출 될 Scope때만이 과정을 반복합니다 .$$watchers$digest

Angular는 이들 각각에 대해 $$ watchers에 감시자를 추가합니다.

1. {{expression}} — 템플릿 (및 표현식이있는 곳) 또는 ng-model을 정의 할 때.
2. $ scope. $ watch ( ‘expression / function’) — JavaScript에서 앵귤러가 볼 범위 객체를 첨부 할 수 있습니다.

$ watch 함수는 세 가지 매개 변수를 사용합니다.

1. 첫 번째는 객체를 반환하거나 표현식을 추가 할 수있는 감시자 함수입니다.

2. 두 번째는 객체에 변경이있을 때 호출되는 리스너 함수입니다. DOM 변경과 같은 모든 것이이 함수에서 구현됩니다.

3. 세 번째는 부울을 취하는 선택적 매개 변수입니다. true이면 angular deep은 객체를 감시하고 false 앵귤러는 객체에 대한 참조 감시 만 수행합니다. $ watch의 대략적인 구현은 다음과 같습니다

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

Angular에는 Digest Cycle이라는 흥미로운 것이 있습니다. $ scope. $ digest ()를 호출하면 $ digest주기가 시작됩니다. ng-click 지시문을 통해 핸들러 함수에서 $ scope 모델을 변경한다고 가정하십시오. 이 경우 AngularJS는 $ digest ()를 호출하여 $ digest주기를 자동으로 트리거합니다. $ 다이제스트주기를 자동으로 트리거합니다. $ digest의 대략적인 구현은 다음과 같습니다.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

JavaScript의 setTimeout () 함수를 사용하여 범위 모델을 업데이트하는 경우 Angular는 변경 내용을 알 수있는 방법이 없습니다. 이 경우 $ apply ()를 수동으로 호출하여 $ 다이제스트주기를 트리거하는 것은 우리의 책임입니다. 마찬가지로 DOM 이벤트 리스너를 설정하고 핸들러 함수 내에서 일부 모델을 변경하는 지시문이있는 경우 $ apply ()를 호출하여 변경 사항을 적용해야합니다. $ apply의 큰 아이디어는 Angular를 인식하지 못하는 코드를 실행할 수 있다는 것입니다. 그 코드는 여전히 범위의 내용을 변경할 수 있습니다. 해당 코드를 $ apply로 감싸면 $ digest () 호출이 처리됩니다. $ apply ()의 대략적인 구현.

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};