AngularJS_AngularJS에서 $watch(), $digest() 및 $apply()의 차이점
- WBOY원래의
- 2016-05-16 15:06:361335검색
AngularJS $scope의 $watch(), $digest() 및 $apply()는 AngularJS를 배우기 위해서는 이러한 기능을 이해해야 합니다.
보기 위해 $scope의 변수를 바인딩하면 AngularJS는 자동으로 내부적으로 "Watch"를 생성합니다. "Watch"는 AngularJS 범위에서 변수의 변경 사항을 모니터링하는 데 사용됩니다. $scope.$watch() 메소드를 호출하여 "Watch"를 생성할 수 있습니다.
$scope.$digest() 함수는 모든 watch를 반복하여 듣고 있는 $scope의 변수가 변경되었는지 감지합니다. 변수가 변경되면 해당 변수에 해당하는 청취 함수가 호출됩니다. 청취 기능은 HTML의 텍스트에 최신 변수 값을 표시하는 등 많은 작업을 수행할 수 있습니다. $scope.$digest가 데이터 바인딩 업데이트를 트리거할 수 있음을 알 수 있습니다.
대부분의 경우 AngualrJS는 $scope.$watch() 및 $scope.$digest() 함수를 자동으로 호출하지만 경우에 따라 수동으로 호출해야 하므로 작동 방식을 이해해야 합니다. 일하고 있는.
$scope.$apply() 이 함수는 먼저 일부 코드를 실행한 다음 $scope.$digest()를 호출합니다. 모든 시계는 한 번 테스트되고 해당 청취 기능이 실행됩니다. $scope.$apply()는 AngularJS를 다른 JavaScript 코드와 통합할 때 유용합니다.
다음에는 $watch(), $digest(), $apply()에 대해 자세히 설명하겠습니다.
$watch()
$watch(watchExpression, 리스너, [objectEquality])
watchExpression: 문자열 또는 함수(범위)일 수 있는 모니터링 개체{}
리스너: 콜백 함수 function(newVal, oldVal, 범위){}
수신 객체가 변경될 때 실행됨objectEquality: 심층적으로 모니터링할지 여부입니다. true로 설정하면 Angular가 모니터링되는 객체의 모든 속성 변경을 확인하도록 지시합니다. 일반 값이 아닌 배열의 개별 요소나 개체의 속성을 모니터링하려는 경우 이를 사용해야 합니다. (기본값: false)
$digest()
리스닝 함수는 실행 중에 모델(스코프의 변수)을 수정하고 모델이 더 이상 변경되지 않을 때까지 $digest()가 계속 호출되므로 현재 범위와 하위 범위의 모든 시계를 감지합니다. 10번 이상 호출되면 $digest()는 프로그램이 무한 루프에 들어가는 것을 방지하기 위해 "최대 반복 제한 초과" 예외를 발생시킵니다.
$apply()
$적용([exp])
exp: 문자열 또는 함수(범위){}
$apply() 라이프사이클 의사코드 다이어그램은 다음과 같습니다
function $apply(expr) {
try {
return $eval(expr);
} catch (e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
예
아래에서는 $watch, $digest 및 $apply를 설명하는 예를 사용합니다.
<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController", function($scope) {
$scope.data = { time : new Date() };
$scope.updateTime = function() {
$scope.data.time = new Date();
}
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
console.log("update time clicked");
$scope.data.time = new Date();
});
});
</script>
<body ng-app="myapp">
<div ng-controller="myController">
{{data.time}}
<br/>
<button ng-click="updateTime()">update time - ng-click</button>
<button id="updateTimeButton" >update time</button>
</div>
</body>
이 코드는 $scope.data.time을 HTML에 바인딩하여 표시하는 동시에 $scope.date.time의 변경 사항을 모니터링하는 감시를 자동으로 생성합니다. 또한 여기에는 2개의 버튼이 있습니다. 첫 번째 버튼은 ng-click 지시문을 통해 $scope.updateTime 메서드를 호출합니다. 이후 AngularJS는 자동으로 $scope.$digest()를 실행하여 HTML에 최신 시간을 표시합니다. 두 번째 버튼은 HTML의 시간을 업데이트하기 위해 자바스크립트 코드를 통해 클릭 이벤트를 추가합니다. 그러나 두 번째 버튼이 작동하지 않습니다. 해결 방법은 다음과 같이 클릭 이벤트가 끝날 때 $scope.$digest() 메서드를 수동으로 호출하는 것입니다.
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
console.log("update time clicked");
$scope.data.time = new Date();
$scope.$digest();
});
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
$scope.$apply(function(){
console.log("update time clicked");
$scope.data.time = new Date();
}
);
});