AngularJS $ 지켜보고있는 가치의 설명 할 수없는 값을 변경하십시오.

Question

ng-show 및 ng-hide의 애니메이션 버전을 구현하려고합니다. 원래는 jQueryUI.toggle('slide', …)을 사용하려고했지만 $watch 번이 여러 번 실행 되었기 때문에 내 요소가 토글 링 된 후 즉시 토글 링됩니다 (때로는 두 번 이상). 하지만 저는 AngularJS의 github 문제에서 watch라는 의도 된 동작 (dirty checking)을 보았습니다.

그래서 나는 괜찮아 생각이 작은 저주, 내가 명시 적으로 표시하거나 대신 간단한 토글의 숨길 것이다 당신이-EFF :

scope.$watch(condition, function myShowHideAction(newValue,oldValue) { 
    if (newValue !== oldValue) { 
     if (newValue) { 
      elm.show("slide", { direction: direction }, "slow"); 
     } else { 
      elm.hide("slide", { direction: direction }, "slow"); 
     } 
    } 
} 

: 내가 지금 같은 $ 시계의 newValue의 값을 확인하는 데 고장

불을 지워라. 나는 무엇을 본다? 토글!

몇 가지 콘솔 로그를 작성한 후 $ watch 루프 (예 : 한 번만 반복하는 것이 아니라 6 번 반복하지만 여기 또는 여기에 없어야 함) 중에 내 상태 값이 변경되는 것을 발견합니다. 그러나 실제 스코프 매개 변수의 값은 newValue처럼 절반으로 변경되지 않습니다.

도대체 무슨 일이 벌어지고 있습니까? 모든 infoboxes이 같은 범위를 공유하기 때문에 이런 일이 발생

Plunker

Answer 1

이유입니다. 함수를 연결하는 mySlide 지시문에 console.log(scope) 문을 넣으면 동일한 범위로 여러 번 생성 된 것을 볼 수 있습니다. 따라서 동일한 범위에서 동일한 조건에 대해 여러 개의 시계가 있습니다.

당신은 아마 고립 된 범위를 만들 $compile(elm.contents())(scope.$new());을해야, 코드는 난 두려워 수행하지 않는 가장 쉬운 방법이지만, 문제는 라인 87 대신 $compile(elm.contents())(scope); 일을 내-map.js 내부 것으로 보인다 해당 정보 상자.