Question

我正在使用Angular 1.5，我有一个用例，我想有条件地将指令属性添加到HTML。

说明：如果condition为true，则需要将directive1和directive2添加为属性。

<ng-form class="myForm" directive1 directive2>

当condition为false时，我希望将directive3和directive4添加为属性

<ng-form class="myForm" directive3 directive4>

我已尝试直接执行条件逻辑，但这不起作用：

<ng-form class="myForm" {{ condition ? directive1 directive2 :directive3 directive4 }}>

是否有人建议轻松实现这一目标？

Answer 1

新答案

img2xlsx

<ng-form class="myForm" ng-attr-directive1="{{condition}}" ng-attr-directive3="{{!condition }}">将解决您的情况。它检查条件并将attr添加到HTML元素。

OLD ONE

为什么不能在指令本身中使用ng-attr。它将检查ng-show并仅在其为真时显示。

Answer 2

您可以尝试将这些指令包装到另一个指令中。已经有了答案：

Add directives from directive in AngularJS

我从其他答案添加此代码：

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      scope: {
        condition: '='
      },
      priority: 1000,
      link: function link(scope,element, attrs) {
        if(!scope.condition){
             element.attr('directive1', '');
             element.attr('directive2', '');
        }else{
             element.attr('directive3', '');
             element.attr('directive4', '');
        }

        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

Answer 3

为什么不使用ng-if？

<ng-form ng-if="condition" class="myForm" directive1 directive2>
<ng-form ng-if="!condition" class="myForm" directive3 directive4>

Angular：向HTML

3 个答案: