如何基于由ng-class设置的类来应用AngularJS指令？

我试图有条件地将指令应用于基于其类的元素。

这是我的问题的一个简单的例子， 看这个小提琴的结果 。 对于这个例子，我使用类名的映射布尔型的ng-class与true ; 在我的实际情况下，我想使用函数的布尔结果。

标记：

 <div ng-app="example"> <div class="testcase"> This will have the directive applied as I expect </div> <div ng-class="{'testcase':true}"> This will not have the directive applied but I expect it to </div> </div> 

JS：

 angular.module('example', []) .directive('testcase', function() { return { restrict: 'C', link: function(scope, element, attrs) { element.css('color', 'red'); } } } ); 

为什么这个指令不适用于通过ng-class获得它的类的div呢？ 我误解AngularJS处理指令的顺序吗？

基于expression式的评估，我应该如何有条件地将指令应用于元素？

Answer 1

在编译过程之后 ， ng-class只是在DOM上设置类。

也许更好的方法来应用指令将通过一个HTML属性：

 <div test-case> 

当然，这不是有条件的，但我会把条件留给指令：

 <div ng-app="example" ng-controller="exampleCtrl"> <div test-case condition="dynamicCondition">Hello</div> <input type="checkbox" ng-model="dynamicCondition"/> Condition </div> 

和

 angular.module('example', []) .controller('exampleCtrl', function ($scope) { $scope.dynamicCondition = false; }) .directive('testCase', function () { return { restrict: 'A', scope: { 'condition': '=' }, link: function (scope, element, attrs) { scope.$watch('condition', function(condition){ if(condition){ element.css('color', 'red'); } else{ element.css('color', 'black'); }; }); } } }); 

请注意，指令名称是testCase而不是testcase ， scope: {'condition': '='},确保条件属性同步且可用作scope.condition并且每当expression式首先改变值。 Js 在这里 。

也许你也应该看看ng-switch ：

 <div ng-switch="conditionFunction()"> <div ng-when="true" test-case>Contents when conditionFunction() returns true</div> <div ng-when="false">Contents when conditionFunction() returns false</div> </div> 

Answer 2

 angular.module('example', []) .directive('testCase', function() { return { restrict: 'C', link: function(scope, element, attrs) { element.css('color', 'red'); } } }) 

Answer 3

根据我不使用这样的问题基于由ng-class设置的类的条件指令。

不要使用这个

 <div ng-app="example"> <div class="testcase"> This will have the directive applied as I expect </div> <div ng-class="{'testcase':true}"> This will not have the directive applied but I expect it to </div> </div> 

因为在复杂的情况下处理确实非常复杂，所以请始终在自定义指令中使用条件。

用这个

 link: function (scope, element, attrs) { scope.$watch('condition', function(condition){ if(condition){ // something going here } else{ // something going here }; }); }