ng-class non si attiva sulla direttiva personalizzata

Question

Attualmente sto sviluppando uno slide menu directive per AngularJS. Il javascript è costituito da tre tipi di direttive: le direttive per ciascun tipo di menu scorrevole (per brevità includo solo il menu scorrevole sinistro), una direttiva wrapper per il resto dello schermo, asmWrapper e una direttiva del pulsante di controllo, asmControl. Attualmente tutte queste direttive utilizzano un servizio, asmService per comunicare.

Quando l'utente fa clic su asmControl, il controller di quella direttiva chiama un metodo su asmService che determina quale menu è stato attivato ed emette un 'asmEvent' su $ rootScope. Il controller asmSlidingMenu catturerà quell'evento e aggiornerà la variabile attiva nel suo ambito, ma la classe CSS dell'elemento DOM rimane invariata.

Suppongo che la classe ng non sia impostata. Come posso risolvere questo?

Ho incluso il codice per la direttiva asmSlidingMenu di seguito. Per vedere un esempio più completo, visualizza lo Plunker che ho creato.

slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService', 
function($rootScope, asmService) { 
    return { 
     restrict: 'AEC' 
    , scope: {} 
    , controller: function($scope) { 
     $rootScope.$on('asmEvent', function(event, prop) { 
      console.log('Intercepted: ' + asmService.asmStates.slideLeft.active); 
      $scope.active = asmService.asmStates.slideLeft.active; 
     }); 
     } 
    , compile: function(element, attrs) { 
     attrs.$set('class', 'asm asm-horizontal asm-left'); 
     attrs.$set('data-ng-class', '{"asm-left-open: active"}'); 
     return { 
      pre: function preLink(scope, iElement, iAttrs) {} 
      , post: function postLink(scope, iElement, iAttrs) {} 
     } 
     } 
    } 
}]); 

Answer 1

Prima di tutto active è in un ambito isolato, quindi ng-class non ha accesso ad esso.

In secondo luogo, e ancora più importante, ng-class è aggiunto dopo le direttive dell'elemento sono state raccolte da angolare. È troppo tardi.

Non c'è motivo di utilizzare ng-class se si dispone della propria direttiva.

slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService', 
    function($rootScope, asmService) { 
    return { 
     restrict: 'AEC' 
     ... 
     link: function(scope, element) { 
     element.addClass('asm asm-horizontal asm-left'); 
     $rootScope.$on('asmEvent', function() { 
      if (asmService.asmStates.slideLeft.active) { 
      element.addClass('asm-left-open'); 
      } 
      else { 
      element.removeClass('asm-left-open'); 
      } 
      ...