AngularJS_AngularJS에서 $watch(), $digest() 및 $apply()의 차이점-JS 튜토리얼-php.cn

AngularJS_AngularJS에서 $watch(), $digest() 및 $apply()의 차이점

WBOY

풀어 주다： 2016-05-16 15:06:36

원래의

1293명이 탐색했습니다.

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();
});

로그인 후 복사

또 다른 해결책은 다음과 같이 $scope.$apply()를 호출하는 것입니다.

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  $scope.$apply(function(){
      console.log("update time clicked");
      $scope.data.time = new Date();
    }
  );
});

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.