Ng-klasa nie uruchomi się na niestandardowej dyrektywie

Question

Obecnie rozwijam slide menu directive dla AngularJS. Javascript składa się z trzech rodzajów dyrektyw: dyrektyw dla każdego rodzaju menu przesuwanego (dla jasności, uwzględniłem tylko lewe menu przesuwne), jedną dyrektywę opakowania dla reszty ekranu, asmWrapper i jedną dyrektywę przycisku sterowania, asmControl. Obecnie wszystkie te dyrektywy używają do komunikacji usługi asmService.

Gdy użytkownik kliknie na asmControl, kontroler tej dyrektywy wywołuje metodę asmService, która określa, które menu zostało wyzwolone i emituje "asmEvent" w $ rootScope. Sterownik asmSlidingMenu wychwyci to zdarzenie i zaktualizuje zmienną aktywną w swoim zasięgu, ale klasa elementu CSS elementu DOM pozostanie niezmieniona.

Zakładam, że ng-klasa nie jest ustawiona. Jak to naprawić?

Dołączyłem kod dyrektywy asmSlidingMenu poniżej. Aby zobaczyć pełniejszy przykład, przejrzyj zrobiony Plunker.

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

Przede wszystkim active jest w zakresie izolowania, więc ng-class nie ma do niego dostępu.

Po drugie, i co ważniejsze, ng-class został dodany po dyrektywy tego elementu zostały zebrane przez kątowe. Jest już za późno.

Nie ma powodu, aby używać ng-class, jeśli masz własną dyrektywę.

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