$scope 사용방법$watch와 $watch입니다.$Apply in AngularJS?

$scope 사용방법$watch와 $watch입니다.$Apply in AngularJS?

잘 요.$scope.$watch ★★★★★★★★★★★★★★★★★」$scope.$apply공식 문서는 도움이 되지 않습니다.

구체적으로 이해하지 못하는 점:

• DOM에 접속되어 있습니까?
• 모델의 DOM 변경 내용을 업데이트하려면 어떻게 해야 합니까?
• 그들 사이의 연결점은 무엇입니까?

저는 이 튜토리얼을 시도했습니다만, 이 튜토리얼은$watch ★★★★★★★★★★★★★★★★★」$apply연하하다

요?$apply ★★★★★★★★★★★★★★★★★」$watch떻게적 적절 용용 용용? ???

넌 앵글이 얼마나 위험한지 알아둬야 해JS는 그것을 이해하기 위해 일한다.

다이제스트 사이클과 $scope

무엇보다도, 앵귤러JS는 이른바 다이제스트 사이클의 개념을 정의합니다.이 사이클은 루프로 간주할 수 있으며, 이 동안 Angular는JS는 모든 변수가 감시하는 모든 변수에 변경이 있는지 확인합니다.$scope. s. 를 가지고 있는 $scope.myVar컨트롤러에 정의되어 있고 이 변수가 감시 대상으로 마크되어 있습니다.그러면 Angular에게 암묵적으로변경을 감시하는 JSmyVar루프의 각 반복에서.

은 '이 다 있는가?' 입니다 "모든 것이 다음 중 하나에 연결되어 있습니까?"$scope시당당??? ???하다, 하다의 $scope다이제스트 루프는 금방 평가하는데 오랜 시간이 걸리고 퍼포먼스 문제도 금방 발생합니다.에 Angular 은 몇 가지 JS를 하는 두 했습니다.$scope변수(아래 참조).

$watch를 통해 $watch 변경 내용 청취 가능

은 두 가 있습니다.$scope감시되고 있는 것처럼 변합니다.

1. 에서 " " " " 라는 표현을 사용하여 합니다.<span>{{myVar}}</span>
2. 를 합니다.$watch

광고 1) 이것은 가장 일반적인 시나리오이며, 이전에 본 적이 있을 것입니다만, 이 시나리오에 의해 백그라운드에서 워치가 작성되고 있는 것은 몰랐습니다.래 using 、 [ ] using용 、 [ ]ivesives예 （ JS 렉예 ） 。ng-repeat인 워치를 도 있습니다는 암묵적인 워치를 작성할 수도 있습니다.

광고 2) 시계를 직접 만드는 방법입니다. $watch에 연결된 때 할 수 있도록 .$scope. 하지 않지만 될 때도 요.그것은 거의 사용되지 않지만 때때로 도움이 된다.예를 들어 'myVar'가 변경될 때마다 일부 코드를 실행하려면 다음을 수행할 수 있습니다.

function MyController($scope) {

    $scope.myVar = 1;

    $scope.$watch('myVar', function() {
        alert('hey, myVar has changed!');
    });

    $scope.buttonClicked = function() {
        $scope.myVar = 2; // This will trigger $watch expression to kick in
    };
}

$digest를 사용하면 변경 내용을 다이제스트 사이클과 통합할 수 있습니다.

이 기능은 통합 메커니즘이라고 생각할 수 있습니다.객체에 직접 부착된 감시 변수를 변경할 때마다 각도(Angular)가 지정됩니다.JS는 변경이 발생했음을 알 수 있습니다.이것은 Angular이기 때문이다.JS는 이미 이러한 변화를 감시하는 방법을 알고 있었다.따라서 프레임워크에 의해 관리되는 코드로 발생하는 경우 다이제스트 사이클이 계속됩니다.

그러나 Angular(각도) 이외의 값을 변경해야 하는 경우가 있습니다.JS world 및 변경 내용은 정상적으로 전파됩니다.이 점을 고려해 주십시오.$scope.myVarjQuery 에서 되는 값$.ajax()은 장래의어느 것이다.이것은 장래의 어느 시점에서 일어날 것이다.JS는 jQuery에서 대기하도록 지시되지 않았기 때문에 이러한 상황이 발생할 때까지 기다릴 수 없습니다.

를 해결하려면 , 「 」를 참조해 주세요.$apply도입되었습니다.소화 주기를 명시적으로 시작할 수 있습니다. 이 은 일부 데이터를 (다른 프레임워크와의 통합)로 해야 합니다. AngularJs와 조합하여 사용하면 안 됩니다.JS 드((각선)JS에 대해서요.

이 모든 것이 DOM과 어떤 관계가 있습니까?

이제 이 것을 꼭 . 에 되어 있는 로 유지되도록 .$scope됩니다.다이제스트 루프에서 더 이상 변경이 발생하지 않으면 완료된 것으로 간주됩니다.

물건에는 수 있습니다.$scope으로 또는 내에서 으로써 오브젝트를 합니다.{{expression}}뷰에서 직접 형성됩니다.

추가 판독치:

• 나만의 AngularJ 만들기, 파트 1: 범위와 다이제스트

AngularJS에서는 모델을 업데이트하고 뷰/템플릿은 DOM을 "자동"으로 업데이트합니다(빌트인 또는 커스텀 디렉티브를 사용).

$apply 및 $watch는 모두 Scope 메서드이며 DOM과 관련이 없습니다.

Concepts 페이지('Runtime' 섹션)에는 $digest 루프, $apply, $evalAsync 큐 및 $watch 목록에 대한 충분한 설명이 있습니다.다음은 텍스트와 함께 제공되는 그림입니다.

스코프에 액세스 할 수 있는 코드가 무엇이든(통상은 컨트롤러와 디렉티브(링크 기능이나 컨트롤러)), Angular의 「watch Expression」을 설정할 수 있습니다.JS는 해당 범위에 대해 평가합니다.이 평가는 Angular(각)가 발생할 때마다 수행됩니다.JS는 $digest 루프(특히 "$watch list" 루프)에 들어갑니다.개별 스코프 속성을 감시하거나 두 속성을 함께 감시하는 함수를 정의하거나 배열의 길이를 감시할 수 있습니다.

'Inside AngularJ'가 일어날 때S" – 예를 들어 각이 있는 텍스트 상자에 입력합니다.JS 양방향 데이터 바인딩 활성화(즉, ng-model 사용), $http 콜백 실행 등– $apply는 이미 호출되었으므로 "AngularJ" 내에 있습니다.위 그림의 S" 직사각형.모든 watchExpressions가 평가됩니다(추가 변경이 검출되지 않을 때까지 여러 번 평가될 수 있습니다).

'AngularJ 밖'에서 무슨 일이 생기면S" – 예를 들어 명령어로 bind()를 사용했을 때 이벤트가 발생하며 콜백이 호출되거나 jQuery가 등록된 콜백이 호출됩니다.– 우리는 아직 "네이티브" 직사각형 안에 있습니다.콜백 코드에 의해 $watch가 시청하고 있는 것이 변경되었을 경우 $apply에 전화를 걸어 Angular에 접속합니다.JS 직사각형으로 $digest 루프가 실행되므로 각도JS는 변화를 알아차리고 마법을 부릴 것이다.

AngularJS는 이 이벤트를 확장하여 루프를 만듭니다.AngularJS context.

$watch()

UI에서 바인딩할 때마다 목록에 를 삽입합니다.

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

, 여기 있습니다.$scope.user 번째 앞에 붙이고, 에 붙어서 붙이는 게 $scope.pass두 번째에 바인딩되어 있습니다.이렇게 하면 목록에 두 개의 "es"를 추가합니다.

링크 단계에서 템플릿 AKA가 로드되면 컴파일러는 모든 디렉티브를 검색하고 모든 디렉티브를 만듭니다.$watches 입니다.

AngularJS는 Angular JS를 합니다.$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

에서 관리할 수 이벤트를 하면 컨텍스트가 됩니다.$digest루프가 발생합니다.2번입니다.가 1개의 프로세서로 된다.$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>

하나밖에 요.$watch사용해도 ng-click은 입니다.

버튼을 누릅니다.

1. 브라우저는 Angular로 들어가는 이벤트를 수신합니다.JS 컨텍스트
2. $digest$watch하다
3. ★★★★★★★★★★★★★★★★★.$watch하고 있으며, 는 또 다른 $scope.name의 변경을 할 것이다.것른$digestloopsyslog.syslog..syslog.
4. 새로운 루프는 아무것도 보고하지 않습니다.
5. 브라우저는 컨트롤을 되찾고 새로운 값인 $scope.name을 반영하여 DOM을 업데이트합니다.
6. 에 들어가는 가 Angular 컨텍스트를 실행하는 입니다.$digest를 쓸 때마다 되어 모든 입력이 됩니다.$watch를 참조해 주세요.

$syslog()

「 」에 $apply어떤 이벤트가 발사되면, 그것은 각진 곳을 통과하지만, 당신이 그것을 호출하지 않으면, 그것은 그 바깥쪽으로 흐릅니다.이것은 매우 간단합니다.는 내부적으로 루프를 호출하고 모든 워치에 걸쳐 반복하여 DOM이 새로 업데이트된 값으로 업데이트되도록 합니다.

$apply().$scope '사슬'은$digest().$scope 그 ★★★children. 상위 오브젝트 중 로컬 변경에 대해 알 필요가 없는 경우 를 사용할 수 있습니다.

$watch,$apply,$digest

• Angular JS - 감시자 이해, $watch, $watch Group, $watch Collection, ng-change

• AngularJS - 다이제스트 사이클 이해(다이제스트 단계 또는 다이제스트 프로세스 또는 다이제스트 루프)

• AngularJS 튜토리얼 - $apply 및 $digest에 대해 (상세)

다음은 이러한 비디오에서 개념을 설명하는 데 사용되는 슬라이드 몇 개입니다(위 링크가 제거되거나 작동하지 않는 경우를 대비해서).

scopescopescope scopescopescopescopescope scopescopescope 。c"는 데이터 바인딩(마크업)에서 사용되지 않기 때문에 감시되지 않습니다.2개 (2개)$scope.a ★★★★★★★★★★★★★★★★★」$scope.b가 감시됩니다.

위 부터: 각이벤트에 Angular.JS는 이벤트를 캡처하고 다이제스트 사이클(모든 워치를 통해 변경)을 수행하고 워치 기능을 실행하며 DOM을 업데이트합니다. 이벤트가 수 .다이제스트 사이클은, 「Digest Cycle 」를 사용해 실행할 수 있습니다.$apply ★★★★★★★★★★★★★★★★★」$digest.

★★★의 상세$apply ★★★★★★★★★★★★★★★★★」$digest:

$watchGroup ★★★★★★★★★★★★★★★★★」$watchCollection만니 specific 。구체적으로는체체으는는는는는는$watchGroupdom 객체가 아닌 뷰에 여러 속성이 있는 객체를 갱신하는 함수를 호출하는 경우(예: 캔버스 내의 다른 뷰, WebGL 또는 서버 요청)에 매우 유용합니다.

여기 문서 링크가 있습니다.

지루하고 졸려서 위의 모든 것을 다 읽으세요.매우 기술적이고, 심오하고, 세밀하고,내가 왜 쓰고 있지?각이 지기 때문에JS는 거대하고 많은 상호 연결된 개념으로 인해 누구나 열광할 수 있습니다.저는 종종 제 자신에게 묻곤 했습니다. "내가 그들을 이해할 만큼 똑똑하지 않은가?"아니야! 모든 용어를 동원한 가짜 언어로 기술을 설명할 수 있는 사람은 거의 없기 때문이야!좋아, 내가 해볼게.

1) 그것들은 모두 이벤트 주도의 것입니다.(웃음소리가 들리지만 계속 읽어주세요)

이벤트 주도의 의미를 모를 경우 페이지에 버튼을 배치하고 "온클릭"을 사용하여 사용자가 클릭할 때까지 기다렸다가 함수 내에 심은 액션을 트리거합니다.또는 SQL Server/Oracle의 "트리거"를 생각해 보십시오.

2) $watch는 "온클릭"입니다.

특별한 것은 파라미터로서 2개의 함수를 필요로 한다는 것입니다.첫 번째는 이벤트의 값을 나타내고 두 번째는 그 값을 고려합니다.

3) $vs는 지칠 줄 모르고 체크하는 보스지만, 좋은 보스입니다.

4) $120은 장애 방지와 같은 수동 작업을 수행할 때 사용할 수 있는 방법입니다(온클릭이 작동하지 않는 경우 강제로 실행합니다).

자, 이제 시각적으로 해 봅시다.아이디어를 더 쉽게 파악할 수 있도록 하기 위해 다음과 같이 하십시오.

레스토랑에서

- 웨이터

고객님의 주문을 받기로 되어 있는데

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

- 매니저는 모든 웨이터가 깨어 있는지 확인하고 고객의 변화에 대응합니다.이것은$digest()

- OWNER는 요구에 따라 모든 사람을 운전할 수 있는 궁극의 권한을 가지고 있습니다.이것은$apply()

언급URL : https://stackoverflow.com/questions/15112584/how-do-i-use-scope-watch-and-scope-apply-in-angularjs