속성 변경 사항을 '볼 수 있습니까'

Question

지시어에 대한 변경 사항을 "감시"할 수 있습니까? 그런 일 :

.directive('vValidation', function() { 
    return function(scope, element, attrs) { 
     element.$watch(function() { 
      if (this.hasClass('someClass')) console.log('someClass added'); 
     }); 
    } 
}) 

Answer 1

예. 속성에서 보간을 사용하는 경우 attr.$observe을 사용할 수 있습니다.

그러나이 보간 속성을하지 않고 당신이 응용 프로그램에서 다른 곳에서 변경 될 것으로 예상 경우 $watch 수있는 것보다, (매우 권장하지 않습니다 무엇 Common Pitfalls 읽기) 함수 리턴 :

scope.$watch(function() { 
    return element.attr('class'); 
}, function(newValue){ 
    // do stuff with newValue 
}); 

어쨌든 가장 좋은 방법은 요소 클래스를 변경하는 코드를 변경하는 것입니다. 어느 순간이 바뀌지?

Answer 2

attrs.$observe('class', function(val){}); 

Answer 3

컨트롤러에서 변수를 볼 수도 있습니다.

이 코드는 다른 모듈이 피드백 메시지를 표시 한 후 알림 표시 줄을 자동으로 숨 깁니다.

HTML :

<notification-bar 
    data-showbar='vm.notification.show'> 
     <p> {{ vm.notification.message }} </p> 
</notification-bar> 

DIRECTIVE :

var directive = { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    scope: { 
     showbar: '=showbar', 
    }, 
    templateUrl: '/app/views/partials/notification.html', 
    controller: function ($scope, $element, $attrs) { 

     $scope.$watch('showbar', function (newValue, oldValue) { 
      //console.log('showbar changed:', newValue); 
      hide_element(); 
     }, true); 

     function hide_element() { 
      $timeout(function() { 
       $scope.showbar = false; 
      }, 3000); 
     } 
    } 
}; 

DIRECTIVE 템플릿 :

<div class="notification-bar" data-ng-show="showbar"><div> 
    <div class="menucloud-notification-content"></div>