AngularJS : $observe 메서드와 $watch 메서드의 차이

AngularJS : $observe 메서드와 $watch 메서드의 차이

다 알고 Watchers ★★★★★★★★★★★★★★★★★」Observers은 곧 $scopeAngularJS는 두 이해할 수 .하지만 그 둘의 차이가 정확히 무엇인지 이해할 수 없었다.

알고 .Observers 측 서 HTML은 로 되어 있습니다.Watchers" " 가되었을 때"$scope.$watch()기능이 실행됩니다.가가제 대각 ?각 각?? ???

$observe()는 Attributes 객체의 메서드이므로 DOM Attribute의 값 변화를 관찰/감시하는 데만 사용할 수 있습니다.내부 지시문만 사용/불러집니다.보간(즉, {{}}'s)을 포함하는 DOM 속성을 관찰/감시해야 할 경우 $observe를 사용하십시오.
,,attr1="Name: {{name}}" '하다.attrs.$observe('attr1', ...)
하면)scope.$watch(attrs.attr1, ...)s가 undefined 모든 에 $를 사용합니다) $watch 。

$watch()는 더 복잡합니다.표현식은 함수 또는 문자열일 수 있는 "식"을 관찰/감시할 수 있습니다.식이 문자열인 경우 함수로 $parse'd(즉, Angular 식으로 평가됨)가 됩니다.(이 기능은 모든 다이제스트 사이클이라고 불립니다).문자열 표현식에는 {{}}'을(를) 포함할 수 없습니다.$watch는 Scope 객체의 메서드이기 때문에 스코프 객체에 접근할 수 있는 곳이라면 어디서든 사용/호출이 가능합니다.

• 컨트롤러 - 임의의 컨트롤러 - ng-view, ng-controller 또는 디렉티브컨트롤러를 통해 작성된 컨트롤러
• 이것이 스코프에도 액세스 할 수 있기 때문에, 디렉티브의 링크 함수

각도 표현: $watch/$watch/$watch ,,,,,, 。attr1="myModel.some_prop"에서 : , , 트 , 、 트 , 、 음 , 、 음 , 、 : , , 。scope.$watch('myModel.some_prop', ...) ★★★★★★★★★★★★★★★★★」scope.$watch(attrs.attr1, ...) (오류)scope.$watch(attrs['attr1'], ...)
하면)attrs.$observe('attr1')이 생기다myModel.some_prop(그것은 아마 당신이 원하는 것이 아닐 것입니다.)

@PrimosK의 답변 코멘트에서 설명한 바와 같이 모든 $observes와 $watch는 다이제스트 사이클마다 체크됩니다.

격리 범위를 가진 지시어는 더 복잡합니다.'@' 구문을 사용하는 경우 보간을 포함하는 DOM 속성(즉, {{}}'s)을 $observe 또는 $watch할 수 있습니다.($watch에서 동작하는 이유는 '@' 구문이 보간을 하기 때문에 $watch는 {{}}}개의 문자열이 없는 문자열을 보기 때문입니다.)어떤 것을 언제 사용해야 하는지 기억하기 쉽도록 이 경우에도 $observe를 사용하는 것이 좋습니다.

이 모든 것을 테스트하기 위해 두 가지 지침을 정의하는 Plunker를 작성했습니다.하나(d1스코프가 가 생성되지 d2 격리 가 작성됩니다는 격리 스코프를 만듭니다.각 디렉티브에는 동일한6개의 속성이 있습니다.각 속성은 $observe'd와 $watched 둘 다입니다.

<div d1 attr1="{{prop1}}-test" attr2="prop2" attr3="33" attr4="'a_string'"
        attr5="a_string" attr6="{{1+aNumber}}"></div>

콘솔 로그를 보고 링크 함수의 $observe와 $watch의 차이를 확인합니다.그런 다음 링크를 클릭하여 클릭 핸들러의 속성 변경에 의해 트리거되는 $observes 및 $watch를 확인합니다.

가 아직하려고 하면 {{}}}개의 Atribute가 undefined보간된 값을 표시하는 유일한 방법은 $observe(또는 "@"와 함께 격리 스코프를 사용하는 경우 $watch)를 사용하는 것입니다.따라서 이들 Atribute의 값을 취득하는 것은 비동기 조작입니다(이 때문에 $observe 및 $watch 함수가 필요합니다).

$하지 않을 수 를 들어,이되어 있는 $observe" $watch" $watch"를 한 번만 하십시오. 예를 들어, 속성에 숫자나 부울(문자열이 아님)이 포함되어 있다면 한 번만 평가하십시오.attr1="22" 그 예를 들어 연결함수, 연결함수, 연결함수, 연결함수, 연결함수, 연결함수, 연결함수, 연결함수, 연결함수, 연결함수, 연결함수, 연결함수, 연결함수.var count = scope.$eval(attrs.attr1)이 문자열일 attr1="my string" 사용하세요 - ★★★★★★★★★★★★★★★★★★★★★★★★★★」attrs.attr1($eval()은 필요 없습니다).

$watch 표현에 대한 Vojta의 구글 그룹 게시물을 참조하십시오.

했다면 청취자 예요.$watch또는 를 사용하여 하는 경우$observe.

콜백 등록$watch에 의해 발사된다.$digest실행됩니다.

에 등록된 콜백$observe보간을 포함하는 속성의 값이 변경되면 호출됩니다(예:attr="{{notJetInterpolated}}").

---

디렉티브 내부에서는, 양쪽 모두를 매우 유사한 방법으로 사용할 수 있습니다.

    attrs.$observe('attrYouWatch', function() {
         // body
    });

또는

    scope.$watch(attrs['attrYouWatch'], function() {
         // body
    });

나는 이것이 꽤 명백하다고 생각한다.

• $120은 디렉티브의 링크 기능에 사용됩니다.
• $watch는 스코프에서 값의 변화를 감시하기 위해 사용됩니다.

주의: 두 함수 모두 2개의 인수가 있습니다.

$observe/$watch(value : string, callback : function);

• value : 항상 watched 요소(스코프 변수 이름 또는 감시할 디렉티브 속성 이름)에 대한 문자열 참조입니다.
• callback : 폼에서 실행되는 함수function (oldValue, newValue)

를 작성했기 때문에, 그 양쪽의 활용도를 실제로 파악할 수 있습니다.나는 상상하기 쉽게 카멜레온의 유추를 사용해 왔다.

$observe가 $watch와 다른 이유는 무엇입니까?

watchExpression이 평가되고 각 digest() 사이클의 이전 값과 비교되며 watchExpression 값이 변경되면 watch 함수가 호출됩니다.

$120은 보간된 값을 감시하는 데 고유합니다.지시어의 속성 값이 보간되어 있는 경우, 예를 들어,dir-attr="{{ scopeVar }}", 감시 함수는 보간된 값이 설정되어 있을 때만 호출됩니다(따라서 $various가 이미 갱신이 필요한 경우).기본적으로 이미 보간 감시자가 있고 $observe 함수는 거기에 의존합니다.

compile.js의 $observe 및 $set 참조

언급URL : https://stackoverflow.com/questions/14876112/angularjs-difference-between-the-observe-and-watch-methods