NG-类将不会自定义指令触发 [英] ng-class will not trigger on custom directive

问题描述

我目前正在开发的一个AngularJS 滑动菜单指令。 JavaScript的包括三种类型的指令组成：指令滑动菜单的各个类型（为了简洁起见，我只包括左侧滑动菜单），对于屏幕的其余部分一个包装指令， asmWrapper ，然后一个控制按钮指令， asmControl 。目前，所有这些指令都使用一个服务， asmService 以沟通。

当用户点击一个asmControl，该指令的控制器呼吁asmService确定哪些菜单已被触发并发出在$ rootScope一个'asm​​Event的方法。 asmSlidingMenu 的控制器将捕获该事件并更新在其范围内活动的变量，但DOM元素的CSS类保持不变。

我想在纳克级未被设置。我该如何解决这个问题？

我已经包括code下面的asmSlidingMenu指令。要了解更完整的示例，请查看 Plunker 我做了。

  slideMenu.directive（'asmSlideLeft'，['$ rootScope'，'asmService'，
功能（$ rootScope，asmService）{
  返回{
      限制：AEC
    ， 范围： {}
    ，控制器：功能（$范围）{
        $ rootScope。在$（'asmEvent'，函数（事件，道具）{
          的console.log（'截获：'+ asmService.asmStates.slideLeft.active）;
          $ scope.active = asmService.asmStates.slideLeft.active;
        }）;
      }
    编译：功能（元素，ATTRS）{
        ATTRS $集（类，ASM ASM-水平ASM-左'）。
        ATTRS $集（数据纳克级，{ASM-左边开：激活}'）。
        返回{
            pre：函数$ P $砰砰（范围，iElement，iAttrs）{}
          ，后：功能postLink（范围，iElement，iAttrs）{}
        }
      }
  }
}]）;
 

解决方案

首先有效是一个隔离范围，所以纳克级有没有打开。

第二，更重要的是，纳克级添加在元素的指令已被角收集。这是为时已晚。

有没有理由使用纳克级如果你有自己的指令。

  slideMenu.directive（'asmSlideLeft'，['$ rootScope'，'asmService'，
  功能（$ rootScope，asmService）{
    返回{
      限制：AEC
      ...
      链接：功能（范围，元素）{
        element.addClass（'ASM ASM-水平ASM左'）;
        $ rootScope。在$（'asmEvent'，函数（）{
           如果（asmService.asmStates.slideLeft.active）{
             element.addClass（'ASM-向左开口'）;
           }
           其他{
            element.removeClass（'ASM-向左开口'）;
           }
          ...
 

I am currently developing a slide menu directive for AngularJS. The javascript consists of three types of directives: the directives for each type of sliding menu (for brevity's sake I only included the left sliding menu), one wrapper directive for the rest of the screen, asmWrapper, and one control button directive, asmControl. Currently, all of these directives are using a service, asmService to communicate.

When the user clicks an asmControl, that directive's controller calls a method on asmService that determines which menu has been triggered and emits an 'asmEvent' on the $rootScope. asmSlidingMenu's controller will catch that event and update the active variable in its scope, but the DOM element's CSS class remains unchanged.

I assume the ng-class is not being set. How do I fix this?

I have included the code for the asmSlidingMenu directive below. To see a more complete example, view the Plunker I made.

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) {}
        }
      }
  }
}]);

解决方案

First of all active is in an isolate scope, so ng-class has no access to it.

Secondly, and more importantly, ng-class is added after the directives of the element have been collected by angular. It's too late.

There's no reason to use ng-class if you have your own directive.

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

这篇关于NG-类将不会自定义指令触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！