10

我目前正在为 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) {}
        }
      }
  }
}]);
4

1 回答 1

19

首先active是在隔离范围内，因此ng-class无法访问它。

其次，更重要的是，在 angular 收集元素的指令之后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');
           }
          ...
于 2014-04-26T07:12:35.203 回答