ng-class sẽ không kích hoạt trên chỉ thị tùy chỉnh

Question

Tôi hiện đang phát triển một slide menu directive cho AngularJS. Javascript bao gồm ba loại chỉ thị: các chỉ thị cho từng loại menu trượt (vì lợi ích ngắn gọn của tôi chỉ bao gồm menu trượt bên trái), một trình bao bọc cho phần còn lại của màn hình, asmWrapper và một nút điều khiển chỉ thị, asmControl. Hiện tại, tất cả các chỉ thị này đang sử dụng dịch vụ, asmService để liên lạc.

Khi người dùng nhấp vào asmControl, bộ điều khiển của chỉ thị đó gọi một phương thức trên asmService xác định trình đơn nào đã được kích hoạt và phát ra 'asmEvent' trên $ rootScope. Bộ điều khiển asmSlidingMenu sẽ bắt sự kiện đó và cập nhật biến hoạt động trong phạm vi của nó, nhưng lớp CSS của phần tử DOM vẫn không thay đổi.

Tôi giả định ng-class hiện không được đặt. Làm thế nào để sửa lỗi này?

Tôi đã bao gồm mã cho chỉ thị asmSlidingMenu bên dưới. Để xem ví dụ hoàn chỉnh hơn, hãy xem Plunker tôi đã tạo.

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

Trước hết active là trong một phạm vi cô lập, vì vậy ng-class không có quyền truy cập vào nó.

Thứ hai và quan trọng hơn, ng-class được thêm sau các chỉ thị của phần tử đã được thu thập theo góc cạnh. Đã quá muộn.

Không có lý do gì để sử dụng ng-class nếu bạn có chỉ thị của riêng bạn.

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