角度：HTMLに条件付き属性を追加する

Question

私はAngular 1.5を使用しています。HTMLに条件付き属性を条件付きで追加したいユースケースがあります。

例： 条件が真である場合、directive1とdirective2を属性として追加します。

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

と条件が偽のとき、私はdirective3とdirective4が属性

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

として追加することにしたい私が直接、条件付きロジックをやって試してみましたが、これは動作しませんでした：

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

誰でも簡単にこれを達成するための提案がありますか？

Answer 1

なぜng-ifを使用しないのですか？

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

Answer 2

新しい答え

<ng-form class="myForm" ng-attr-directive1="{{condition}}" ng-attr-directive3="{{!condition }}"> 

ng-attrはあなたのケースを解決します。条件をチェックし、attrをHTML要素に追加します。

ONE OLD

は、なぜあなたはディレクティブ自体にng-showを使用することはできません。 conditionをチェックし、それが真である場合にのみ表示されます。

Answer 3

これらのディレクティブを別のディレクティブにラップすることもできます。そのための答えはすでにあります：

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