使用ng-class加载指令时类指令不起作用

我试图使用ng-class加载'class'指令。但是当我这样做时，我的指令永远不会被加载。该指令是一个多用途指令，我不想在此创建一个独立的作用域。它只会在需要时才加载，基于ng-class条件，因此不使用属性或元素指令。有没有人试图做到这一点，并取得成功？使用ng-class加载指令时类指令不起作用

此指令使用<div ng-class="someClass {{tooltip: enabled}}"></div> 这里调用enabled是一个范围变量。

app.directive('tooltip', ['$timeout', '$location', '$rootScope', function (timer, $location, $rootScope) { 
    return { 
     restrict: 'C', 
     transclude: true, 
     link: function (scope, element) { 
      var printContent = function() { 
       /* uses the content of .tooltip-content if it is a complex html tooltip, 
        otherwise 
        you can use the title attribute for plaintext tooltips 
       */ 
       var tooltipContent = $(element).find('.tooltip-content').html(); 
       if (!tooltipContent) { 
        tooltipContent = $(element).attr('title'); 
       } 
       $(element).tooltip({ 
        content: tooltipContent, 
        items: "img, a, span, button, div", 
        tooltipClass: "tooltip", 
        position: { my: "left+30 top", at: "right top", collision: "flipfit" }, 
        show: { effect: "fadeIn", duration: "fast" }, 
        hide: { effect: "fadeOut", duration: "fast" }, 
        open: function (event, ui) { $rootScope.tooltipElement = event.target; } 
       }); 
      }; 
      timer(printContent, 0); 
     } 
    }; 
}]);

来源

2013-10-07 vaibinewbee

可能你只是忘了设置：'restrict：'C''？ – Cherniv

其集合。请参阅我的帖子更新。 – vaibinewbee

可能会尝试以下语法：'class =“someClass”ng-class =“{tooltip：enabled}”' – Cherniv

有趣的问题。看起来你不想使用ng-class指令，因为它不会在添加类之后重新编译内容。你可能会希望创建一个真正重新编译自己的动态类指令时该值为true：

app.directive('dynamicClass', function($compile) { 
    return { 
     scope: { 
      dynamicClassWhen: '=', 
      dynamicClass: '=' 
     }, 
     link: function(scope, elt, attrs) { 
      scope.$watch('dynamicClassWhen', function(val) { 
       if (val) { 
        console.log(val); 
        elt.addClass(scope.dynamicClass); 
        $compile(elt)(scope); 
       } 
      }); 
     } 
    }; 
});

您可能需要修改这个用于去除类和能力取决于如果$compile足够为你或如果你需要进一步操纵HTML，但这似乎是你的正确轨道。我做了一个fiddle与此在行动。

希望这会有所帮助！

来源

2014-03-08 07:12:39 hassassin

在'ngClass'所做的更改时重新编译元素应该嵌入到Angular core IMHO中。感谢hassassin提出这个想法。顺便说一句，我尝试了http://stackoverflow.com/questions/22733848/angularjs-attempt-to-dynamically-apply-directive-using-ngclass-causing-weird-fu，并得到了一些奇怪的行为。不知道问题出在你的代码，我的实现，还是Angular，但我采取了另一种方法，并没有进一步追求。 – poshest

嗯。那么，我很高兴你找到了另一种方法，我的答案似乎在工作，在人为的情况下。在另一个问题中你的小提琴有一个问题，它使用的焦点集中在事物的所有元素上，如果你点击一次输入，它会添加类，如果你再次关注，它会重新添加它并重新编译（指令的数量增加）。这些东西可能是固定的，但答案被接受了。这个似乎适合在这里。需要帮助请叫我。 – hassassin

我们可能应该在另一个线程中讨论这个问题，但是......是的，你是对的我稍后将添加'removeClass（）'位，并且不期望addClass将两个相同的类添加（它不在jQuery中）。您的评论启发了我添加'else {elt.removeClass（scope.dynamicClass）; }'并且将'$ compile'移到'if'之外，但是这只会使jsFiddle完全崩溃http://jsfiddle.net/ss6Y5/10/。如果你想为另一个线程贡献一个解决方案，我至少会投票赞成。我更喜欢使用你的代码的模式，但我不知道是否礼貌地收回已接受的答案！ – poshest

使用ng-class加载指令时类指令不起作用

回答

相关问题