ng-class가 맞춤 지침에서 트리거되지 않습니다.

Question

현재 AngularJS에 대해 slide menu directive을 개발 중입니다. javacript는 세 가지 유형의 지시문으로 구성됩니다. 각 유형의 슬라이딩 메뉴에 대한 지시문 (간결함을 위해 왼쪽 슬라이딩 메뉴 만 포함), 나머지 화면에 대한 하나의 래퍼 지시문 asmWrapper 및 하나의 제어 버튼 지시문 asmControl. 현재 이러한 지침은 모두 asmService과 통신하는 서비스를 사용하고 있습니다.

사용자가 asmControl을 클릭하면 해당 지시어의 컨트롤러는 어떤 메뉴가 트리거되었는지를 결정하는 asmService의 메소드를 호출하고 $ rootScope에서 'asmEvent'를 내 보냅니다. asmSlidingMenu의 컨트롤러는 해당 이벤트를 잡아서 해당 범위의 활성 변수를 업데이트하지만 DOM 요소의 CSS 클래스는 변경되지 않습니다.

ng-class이 설정되어 있지 않다고 가정합니다. 이 문제를 어떻게 해결할 수 있습니까?

아래에 asmSlidingMenu 지시문의 코드가 포함되었습니다. 좀 더 완벽한 예를 보려면 Plunker을보십시오. 모든 active의

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

우선 정도로 ng-class가 액세스 권한이없는, 분리 범위이다.

둘째, 더 중요한 것은 ng-class이 추가되었습니다. 이후에 다음에 요소의 지시문이 모아서 수집되었습니다. 너무 늦었 어.

직접 지시 사항이있는 경우 ng-class을 사용할 이유가 없습니다.

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