小编Elz*_*air的帖子

我目前正在为AngularJS 开发一个幻灯片菜单指令.javascript包含三种类型的指令:每种类型的滑动菜单的指令(为简洁起见,我只包括左侧滑动菜单),一个用于屏幕其余部分的包装指令,asmWrapper和一个控制按钮指令asmControl.目前,所有这些指令都使用服务asmService进行通信.

当用户单击asmControl时,该指令的控制器调用asmService上的方法,该方法确定触发了哪个菜单并在$ rootScope上发出'asmEvent'.asmSlidingMenu的控制器将捕获该事件并更新其范围内的活动变量,但DOM元素的CSS类保持不变.

我假设没有设置ng-class.我该如何解决？

我已经在下面包含了asmSlidingMenu指令的代码.要查看更完整的示例,请查看我制作的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) {}
        }
      }
  } …