ngClass가 함수를 평가하는 시점/사용자 지정 지시문에서 이것을 모방하는 방법

Question

저는 누군가가 제가 현재 부족하다고 생각하는 각도 시각을 제공 할 수 있기를 희망합니다.

ngClass를 사용하면 일부 기능에 따라 클래스를 추가/제거 할 수 있습니다. 예를 들어, 다음과 같이 쓸 경우 :

<div ng-class="{'some-class' : myFunction()}"> </div> 

myFunction()이 true 또는 false로 평가되면. 특히 좋은 점은 표현식을 평가하기 위해 코드에서 다른 곳에서 호출되는이 함수에 대해 걱정할 필요가 없다는 것입니다. ngClass는 myFunction()의 현재 반환 값으로 클래스를 최신 상태로 유지합니다.

그래서 첫 번째 질문은 ngClass가 myFunction()의 반환 값이 변경되었는지 확인해야하는 시점을 어떻게 결정합니까? 모든 다이제스트 루프에서 myFunction()을 확인합니까? 아마도 시계에 설정되어있는 것이 있지만 감시 대상은 무엇입니까? ngClass에 대한 코드를 읽으려고했지만 구현 방법에 대한 충분한 지식이 부족했습니다.

내가 알고 싶은 이유는 사용자 지정 지시문에서이 동작을 모방하려는 것입니다. 그래서 내 앱에는 위의 ngClass와 비슷한 것이 있습니다. myFunction()은 내 페이지의 주 컨트롤러에 앉아 있지만 직접적인 DOM 조작이 많아서 안됩니다. 컨트롤러에서 myFunction()을 가져 와서 사용자 지정 지시문으로 옮기고 싶습니다.하지만 그렇게하면 클래스를 설정하기 위해이 함수를 반복적으로 검사 할 방법이 필요합니다. 나는 이런 식으로 뭔가를 할 수 있도록하고 싶습니다 :

app.directive('myDirective', function() { 
    return { 
    restrict: 'A, 
    link: function (scope, elem, attrs) { 
     function myFunction() {//...} 

     // I want this to be checked at the 
     // same frequency that ngClass is checked 
     // Is that each digest cycle? 

     if (myFunction()) { 
     elem.addClass('some-class'); 
     } else { 
     elem.removeClass('some-class'); 
     } 
    } 
    } 

은 분명히이 작동하지 않을. 지시문이 링크 될 때만 실행됩니다. 그렇다면 어떻게 myFunction()에서 변경 사항을 볼 수 있습니까?

Answer 1

모든 $ digest주기 동안 초기 인수를 평가하고 초기로드 중에 한 번 리스너 (두 번째 인수)를 호출하고이어서 초기 인수의 평가가 결과와 다른 값을 반환 할 때마다 .$watch()을 사용합니다. 너무 이른.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch을 참조하십시오.

app.directive('myDirective', function() { 
    return { 
    restrict: 'A, 
    link: function (scope, elem, attrs) { 
     scope.$watch(function() { 
     // .. this is your "myFunction()" 
     return result; 
     }, function(newResult) { 
     if (newResult) { 
      elem.addClass('some-class'); 
     } else { 
      elem.removeClass('some-class'); 
     } 
     }); 
    } 
    } 
}