AngularJS
데이터 바인딩 작동 방식

비고

데이터 바인딩 예제

<p ng-bind="message"></p>

이 '메시지'는 현재 요소 컨트롤러의 범위에 첨부되어야합니다.

$scope.message = "Hello World";

나중에 메시지 모델이 업데이트 되더라도 해당 업데이트 된 값이 HTML 요소에 반영됩니다. 각을 컴파일 할 때 템플릿 "Hello World"가 현재 세계의 innerHTML에 첨부됩니다. Angular는 뷰에 첨부 된 모든 지시문을 감시하는 메커니즘을 유지합니다. 그것은 Watchers 배열을 반복하는 Digest Cycle 메커니즘을 가지고 있으며 이전 모델 값이 변경된 경우 DOM 요소를 업데이트합니다.

Scope에 주기적으로 검사하는 것은 그것이 연결된 객체에 변경이 있는지 여부입니다. 스코프에 연결된 모든 객체가 감시되는 것은 아닙니다. 스코프는 $$ WatchersArray를 원형으로 유지합니다. 스코프는 $ digest가 호출 될 때만이 WatchersArray를 반복합니다.

Angular는 WatchersArray에 이들 각각에 대한 관찰자를 추가합니다.

1. {{expression}} - 템플릿에서 (그리고 표현식이있는 곳에서는) 또는 ng-model을 정의 할 때.
   
2. $ scope. $ watch ( 'expression / function') - 자바 스크립트에서 watch를위한 angle 객체를 붙일 수 있습니다.

$ watch 함수는 세 개의 매개 변수를 취합니다.

1. 첫 번째 것은 객체를 반환하는 워처 함수이거나 그냥 표현식을 추가 할 수 있습니다.
   

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

3. 세 번째 매개 변수는 부울을 취하는 선택적 매개 변수입니다. 그것의 진실하고 각진 깊은 시계가 목표 & 그것의 틀린 각 측정하면 다만 목표에 참고를 보는 경우에. $ 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이라는 재미있는 것이 있습니다. $ digest ()는 $ scope. $ digest ()를 호출 한 결과로 시작됩니다. ng-click 지시문을 통해 핸들러 함수에서 $ scope 모델을 변경한다고 가정합니다. 이 경우 AngularJS는 $ digest ()를 호출하여 $ digest주기를 자동으로 트리거합니다 .ng-click 외에도 모델을 변경할 수있는 여러 내장 지시문 / 서비스 (예 : ng-model, $ timeout 등) 자동으로 $ 다이제스트주기를 트리거합니다. $ 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 ()를 호출하여 변경 사항이 적용되도록해야합니다. $ 적용에 대한 큰 아이디어는 Angular를 인식하지 못하는 코드를 실행할 수 있다는 것입니다. 코드는 여전히 범위의 내용을 변경할 수 있습니다. 이 코드를 $ apply에 넣으면 $ digest ()를 호출 할 것입니다. $ apply ()의 거친 구현.

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