AngularJS에서 $ scope. $ watch와 $ scope. $ apply를 사용하는 방법

 

질문 : AngularJS에서 $ scope. $ watch와 $ scope. $ apply를 어떻게 사용하나요?

---

$scope.$watch 및 $scope.$apply 사용 방법을 이해하지 못합니다. 공식 문서는 도움이되지 않습니다.

내가 구체적으로 이해하지 못하는 것 :

• DOM에 연결되어 있습니까?
• 모델에 대한 DOM 변경 사항을 어떻게 업데이트 할 수 있습니까?
• 그들 사이의 연결 지점은 무엇입니까?

이 튜토리얼을 시도했지만 $watch 및 $apply 대한 이해가 당연히 필요합니다.

$apply 와 $watch 는 무엇을하고 어떻게 적절하게 사용하나요?

답변

---

AngularJS를 이해하기 위해서는 어떻게 작동하는지 알아야합니다.

무엇보다도 AngularJS는 소위 다이제스트 사이클 의 개념을 정의합니다. 이주기는 루프로 간주 될 수 있으며,이 동안 AngularJS는 $scope 감시 하는 모든 변수에 변경 사항이 있는지 확인합니다. 따라서 컨트롤러에 $scope.myVar 정의되어 있고이 변수가 감시 대상으로 표시된 경우 암시 적으로 AngularJS에 루프의 각 반복 myVar 의 변경 사항을 모니터링하도록 지시하는 것입니다.

자연스러운 후속 질문은 다음과 같습니다. $scope 에 첨부 된 모든 것이 감시되고 있습니까? 다행히도 아닙니다. $scope 모든 개체에 대한 변경 사항을 살펴보면 다이제스트 루프를 평가하는 데 시간이 오래 걸리고 성능 문제가 빠르게 발생합니다. $scope 변수를 감시되는 것으로 선언하는 두 가지 방법을 제공 한 이유입니다 (아래 참조).

$scope 변수를 감시되는 것으로 선언하는 방법에는 두 가지가 있습니다.

광고 1) 이것은 가장 일반적인 시나리오이며 이전에 본 적이 있다고 확신하지만 이것이 백그라운드에서 시계를 만든 것을 몰랐습니다. 네, 그렇습니다! AngularJS 지시문 (예 : 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
    };
}

$apply 함수를 통합 메커니즘으로 생각할 수 있습니다. $scope 개체에 직접 연결된 일부 감시 변수 를 변경할 때마다 AngularJS는 변경이 발생했음을 알게됩니다. 이는 AngularJS가 이미 이러한 변경 사항을 모니터링 할 것을 알고 있기 때문입니다. 따라서 프레임 워크가 관리하는 코드에서 발생하면 다이제스트주기가 계속됩니다.

그러나 때로는 AngularJS 세계 외부에서 일부 값 을 변경하고 변경 사항이 정상적으로 전파되는 것을보고 싶을 때가 있습니다. 이것을 고려하십시오 $.ajax() 핸들러 내에서 수정 될 $scope.myVar 이것은 미래의 어느 시점에서 일어날 것입니다. AngularJS는 jQuery를 기다리라는 지시를받지 않았기 때문에 이것이 일어날 때까지 기다릴 수 없습니다.

이를 해결하기 위해 $apply 가 도입되었습니다. 소화주기를 명시 적으로 시작할 수 있습니다. 그러나 일부 데이터를 AngularJS (다른 프레임 워크와 통합)로 마이그레이션하는 데만 사용해야하지만 AngularJS에서 오류가 발생하므로이 메서드를 일반 AngularJS 코드와 결합하여 사용하지 마십시오.

글쎄,이 모든 것을 알았으니 튜토리얼을 다시 따라야합니다. 다이제스트주기는 변경 사항이없는 한 $scope 연결된 모든 감시자를 평가하여 UI와 JavaScript 코드가 동기화 상태를 유지하는지 확인합니다. 다이제스트 루프에서 더 이상 변경이 발생하지 않으면 완료된 것으로 간주됩니다.

컨트롤러에서 명시 적으로 또는 뷰에서 직접 {{expression}} $scope 개체에 개체를 연결할 수 있습니다.

이 모든 것에 대한 기본적인 지식을 명확히하는 데 도움이되기를 바랍니다.

추가 자료 :

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

출처 : https://stackoverflow.com/questions/15112584/how-do-i-use-scope-watch-and-scope-apply-in-angularjs