E 'possibile modificare gli attributi di' watch '

Question

E' possibile "guardare" i cambiamenti ui sulla direttiva? qualcosa di simile:

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

Answer 1

Sì. È possibile utilizzare attr.$observe se si utilizza l'interpolazione sull'attributo.

Ma se questo non è un attributo interpolato e si aspettano di essere cambiato da qualche altra parte nel ricorso (ciò che non è estremamente consigliato, leggere Common Pitfalls), di quanto si possa $watch un ritorno funzione:

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

In ogni caso, è probabile che l'approccio migliore per te sia modificare il codice che modifica la classe di elementi. In quale momento viene cambiato?

Answer 2

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

Answer 3

È anche possibile vedere la variabile nel controller.

Questo codice nasconde automaticamente la barra di notifica dopo che un altro modulo visualizza il messaggio di feedback.

HTML:

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

DIRETTIVA:

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

DIRETTIVA MODELLO:

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