ng sınıfı, özel yönergede tetiklenmeyecek

Question

AngularJS için şu anda bir slide menu directive geliştiriyorum. Javascript üç tip direktiften oluşur: her kayan menü tipi için direktifler (kısırlık için sadece sol kayan menüyü dahil ettim), ekranın geri kalanı için bir sarıcı yönergesi, asmWrapper ve bir kontrol düğmesi yönergesi, asmControl. Şu anda, bu yönergelerin tümü iletişim kurmak için asmService hizmetini kullanıyor. Kullanıcı bir asmControl tıklattığında, bu yönergenin denetleyicisi, hangi menünün tetiklendiğini belirleyen ve $ rootScope'ta bir 'asmEvent' gönderen asmService yöntemini çağırır. asmSlidingMenu 'un denetleyicisi bu olayı yakalayacak ve etkin değişkeni kendi kapsamı içinde güncelleyecektir, ancak DOM öğesinin CSS sınıfı değişmeden kalır.

ng sınıfı ayarlanmıyor. Bunu nasıl düzeltirim?

Aşağıdaki asmSlidingMenu yönergesinin kodunu ekledim. Daha eksiksiz bir örnek görmek için, yaptığım Plunker'u görüntüleyin. Tüm active ait

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

İlk böylece ng-class buna erişimi yok, bir izole, kapsamı içindedir. İkincisi, ve daha da önemlisi,'dan sonra eklendikten sonra, ng-class eklenir, bu elemanın direktifleri açısal olarak toplanır.Çok geç.

Kendi yönergeleriniz varsa ng-class kullanmanın bir nedeni yoktur.

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