如何根据 ng-class 设置的类应用 AngularJS 指令? [英] How do I apply an AngularJS directive based on a class set by ng-class?

问题描述

我正在尝试根据元素的类有条件地将指令应用于元素.

这是我的问题的一个简单案例，查看此小提琴中的结果.在这个例子中，我使用了 ng-class 和 true 的类名到布尔形式的映射；在我的实际情况中，我想使用函数的布尔结果.

标记:

<div class="testcase">这将按照我的预期应用指令
<div ng-class="{'testcase':true}">这不会应用该指令，但我希望它

JS:

angular.module('example', []).directive('testcase', function() {返回 {限制:'C'，链接:函数(范围，元素，属性){element.css('颜色', '红色');}}});

为什么不将指令应用于通过 ng-class 获取其类的 div?我是否误解了 AngularJS 处理指令的顺序?

我应该如何根据表达式的计算有条件地将指令应用于元素?

解决方案

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

也许应用指令的更好方法是通过 HTML 属性:

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

<div test-case condition="dynamicCondition">你好</div><input type="checkbox" ng-model="dynamicCondition"/>健康)状况

和

angular.module('example', []).controller('exampleCtrl', function ($scope) {$scope.dynamicCondition = false;}).directive('testCase', function () {返回 {限制:'A'，范围: {条件":="},链接:函数(范围、元素、属性){scope.$watch('condition', function(condition){如果(条件){element.css('颜色', '红色');}别的{element.css('颜色', '黑色');};});}}});

注意指令名称是 testCase 而不是 testcase，scope: {'condition': '='}, 位确保条件属性是同步的，可作为 scope.condition 使用，并且 watch 每次第一个参数的表达式更改值时都会评估第二个参数.JsFiddle 这里.

也许您还应该查看 ng-switch:

<div ng-when="true" test-case>conditionFunction()返回true时的内容</div><div ng-when="false">conditionFunction() 返回 false 时的内容</div>

I'm trying to conditionally apply a directive to an element based on its class.

Here's a simple case of my issue, see the results in this fiddle. For this example, I'm using the map of class names to booleans form of ng-class with true; in my actual case I'd like to use the boolean result of a function.

Markup:

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

Why isn't the directive being applied to the div that's getting its class through ng-class? Am I misunderstanding something about the order in which AngularJS is processing directives?

How should I be conditionally applying a directive to an element based on the evaluation of an expression?

解决方案

ng-class just sets classes on the DOM, after the compilation process.

Perhaps a better way to apply the directive would be through an HTML attribute:

<div test-case>

Of course, this is not conditional, but I would leave the conditioning to the directive:

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

and

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

Notice the directive name is testCaserather than testcase, the scope: {'condition': '='}, bit ensures that the condition attribute is synchronized and available as scope.condition and the watch evaluates the second argument every time the expression on the first changes value. JsFiddle over here.

Perhaps you should also look into 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>

这篇关于如何根据 ng-class 设置的类应用 AngularJS 指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！