angular.js가 모델이 변경된 것을 감지하는 방법

Question

흥미롭게도, angular.js가 모델이 변경된 것을 감지하는 방법과이 변경을 처리하기위한 일반적인 각도 워크 플로우는 무엇입니까? 내 모듈의 일부를 변경 한 후에 페이지에서 다음에 실제로 일어난 일을 말합니다.

Answer 1

이것은 제 이해입니다. 내가 틀렸다면 나를 바로 잡아라. 이는 양방향 정보 공유입니다.

데이터 바인딩은 실제로 어떻게 작동하는지 알면 마법이 아닙니다.

모든 변수가 데이터 바인딩 기능을 갖기 위해서는 $ watch 메서드를 사용하여 등록해야합니다.

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

$ watch. $ digest가 호출 될 때마다 $ watch를 통해 이러한 모든 바인드 된 데이터가 검사됩니다. Angular는 범위 내의 모든 값을 검사하는 대신 $ watch 메서드를 사용하여 등록한 값만 검사합니다. 감시자를 사용하여 모델을 등록하지 않으면 검사되지 않습니다. 이전 값과 새 값을 비교하여 변경된 값이 있는지 확인합니다. 변경되면 청취자 함수 (watcher 메소드의 두 번째 매개 변수)가 실행됩니다.

$ watch를 사용하여 범위에 변수를 등록하지 않았거나 $ 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> 

은 실제로 수량 및 비용 변수와 통화 $ 범위에 대한 전문가를 등록 NG 모델의 지시에 내장 우리가 알고있는없이 매번에게 값의 변경을 소화 $.. 맞춤 지시문을 만들 수 있습니다.

{{}} 내부의 모든 표현은 컴파일 단계에서 자동으로 감시됩니다. 따라서 앱의 어느 위치에서든 값이 변경되면 변경됩니다.