Можно ли изменять атрибуты «смотреть»

Question

Можно ли «посмотреть» изменения ui в директиве? что-то вроде этого:

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

Answer 1

Да. Вы можете использовать attr.$observe, если вы используете интерполяцию по атрибуту.

Но если это не интерполированное атрибут, и вы ожидаете, что это будет изменено где-то еще в приложении (что крайне не рекомендуется, прочитать Common Pitfalls), чем вы можете $watch функция возврата:

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> 

ДИРЕКТИВА:

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); 
     } 
    } 
}; 

ДИРЕКТИВА ШАБЛОН:

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