如何基于ng类设置的类应用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>

为什么指令不应用于通过

ng类获取其类的
div
？我是否误解了AngularJS处理指令的顺序

我应该如何基于表达式的求值有条件地将指令应用于元素？
ng class
只是在编译过程之后在DOM上设置类

应用该指令的更好方法可能是通过HTML属性：

<div test-case>

请注意，指令名是
testCase
，而不是
testCase
，
范围：{'condition'：'='}，
位确保condition属性是同步的，并且作为
scope.condition
可用，
watch
在第一个表达式每次更改值时都对第二个参数求值。JsFiddle

也许你还应该研究一下：


conditionFunction（）返回true时的内容
conditionFunction（）返回false时的内容
根据我的说法，不要像这个问题一样使用基于ng类设置的类的条件指令

不要使用此

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

我无法找出答案，但值得一提的是，在我的测试中，类被切换开和关，它只是没有应用指令函数。为什么不尝试将真/假条件传递到指令中？i、 这是我的小提琴。检查第二行并单击切换按钮以显示添加和删除类@jdp必须执行
ng class=“{true:'testcase'，false:”
似乎有很多不必要的代码，当我阅读角度文档时，我认为
ng class=“{'testcase'：true}”
应该以相同的方式运行…直到编译指令之后，才会计算类，所以这可能不是一个好办法。似乎更好的方法是基于对象加载角度模板。@Carolinet我为您创建了github票证谢谢@sza！我已经开始讨论了。既然angular已经有了根据属性、类、元素或注释的存在与否来决定是否应用指令的机制，为什么指令决定是否应用它自己更好？我认为指令就像类一样，定义了一个对象。比如，“这个对象是一个测试用例，应该这样做”。在我的第一个例子中，指令决定它的行为或基于元素的属性（因此它可能最适合于不存在“全部或无”的情况）。在我的第二个示例中，ng switch决定元素是否将成为测试用例。虽然您的两个示例都实现了我试图达到的目标，但当角度特性“有条件地使用ng类和类到布尔值的映射设置类”和该特性时，它们感觉像是大量重复的、不必要的代码“基于类的存在应用一个指令”应该能够干净地组合在一起，而不需要额外的重复。如果答案是“不，angular不能这样做”，那么这很好，只是出乎意料：）为什么需要一个新的作用域？你不能只使用与控制器相同的作用域吗？
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');
                };
            });
        }
    }
});

<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>

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

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