[angularjs] AngularJS에서 $ scope. $ watch 및 $ scope. $ apply를 어떻게 사용합니까?

AngularJS는이 events-loop을 확장하여 이라는 것을 만듭니다 AngularJS context.

$ watch ()

UI에서 무언가를 바인딩 할 때마다 목록 $watch에 a$watch 를 삽입 합니다 .

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

여기 $scope.user에 첫 번째 입력에 바인딩되어 있고 두 번째 입력에 $scope.pass바인딩되어 있습니다. 이렇게하면 목록에 두 개의 $watches$watch 가 추가 됩니다 .

우리의 경우 템플릿이 로드, 일명 연결 단계에서, 컴파일러는 모든 지시를 찾아 모든 생성 할 $watch필요 말이지.

AngularJS와는 제공 $watch, $watchcollection및 $watch(true). 아래는 감시자 로부터 얻은 세 가지를 모두 자세히 설명하는 깔끔한 다이어그램 입니다.

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
  });

  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
  });

  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
  }, true);

  $timeout(function(){
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();

     console.log("Triggers $watchCollection and $watch(true)")
     $scope.users.push({ name: 'Thalaivar'});
     $scope.$digest();

     console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}

http://jsfiddle.net/2Lyn0Lkb/

$digest 고리

브라우저가 AngularJS 컨텍스트에서 관리 할 수있는 이벤트를 수신하면 $digest루프가 시작됩니다. 이 루프는 두 개의 작은 루프로 구성됩니다. 하나는 $evalAsync대기열을 처리하고 다른 하나 는 대기열을 처리합니다 $watch list. $digest의 목록을 의지 루프 $watch우리가 가지고

app.controller('MainCtrl', function() {
  $scope.name = "vinoth";

  $scope.changeFoo = function() {
      $scope.name = "Thalaivar";
  }
});

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

$watchng-click은 시계를 만들지 않기 때문에 여기에는 하나만 있습니다.

우리는 버튼을 누릅니다.

1. 브라우저는 AngularJS 컨텍스트로 들어갈 이벤트를받습니다.
2. $digest루프가 실행됩니다 및 변경에 대한 모든 $ 시계를 요청합니다.
3. 부터 $watch$ scope.name의 변화를 지켜보고 된이 변화를보고, 그것은 또 다른 강제 $digest루프.
4. 새로운 루프는 아무 것도보고하지 않습니다.
5. 브라우저는 제어권을 다시 얻고 $ scope.name의 새로운 값을 반영하여 DOM을 업데이트합니다.
6. 여기서 중요한 것은 AngularJS 컨텍스트에 들어가는 모든 이벤트가 $digest루프 를 실행한다는 것 입니다. 즉, 입력에 문자를 쓸 때마다 루프 $watch가이 페이지의 모든 항목 을 검사 합니다.

$ apply ()

$apply이벤트가 시작될 때 전화를 걸면 각도 컨텍스트를 통과하지만 전화를 걸지 않으면 외부에서 실행됩니다. 그렇게 쉽습니다. 내부적으로 루프 $apply를 호출하고$digest() DOM이 새로 업데이트 된 값으로 업데이트되도록 모든 시계를 반복합니다.

이 $apply()방법은 전체 $scope체인 에서 감시자를 트리거 하는 반면 $digest(), 현재 $scope및 그 감시자 만 트리거 합니다 children. 상위 $scope개체가 로컬 변경 사항에 대해 알 필요가없는 경우을 사용할 수 있습니다 $digest().

답변

$watch(
  function(){return orders;},
  function(){Kitchen make it;}
);