我该如何申请基于NG-类设置一个类的AngularJS指令？ [英] How do I apply an AngularJS directive based on a class set by ng-class?

问题描述

我试图根据类指令有条件地应用到一个元素。

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.

标记：

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

为什么没有指令正在通过适用于 DIV 这是越来越同级车纳克级？我误解一些关于在AngularJS正在处理指令的顺序？

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?

应如何基于一个前pression的评价我有条件应用指令的因素呢？

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

推荐答案

纳克级仅设置了DOM类，在编译流程。

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

也许申请指令将通过HTML属性更好的方法：

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>

和

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

注意指令的名称是测试用例，而不是测试用例的范围：{条件'：'='} 位确保了条件属性是同步的，并可以作为 scope.condition 和看评估每一次的第一个变化值前pression第二个参数。 这里。

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.

也许你也应该看看 NG-开关

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-类设置一个类的AngularJS指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！