AngularJSで条件付きでディレクティブを適用するには？

Question

ngAttrを使用して条件付きで簡単な指示文を適用したい。私の指示が常に表示される理由は分かりません。だからが未定義/偽の変数がある場合は、私の指示文を適用したい：dirr。

ngAttr、$のallOrNothingフラグを使用は未定義で補間文字列結果における任意の式は、属性が削除された場合に、使用され、要素に追加されていない補間します。

My code pen

<div ng-app="myApp" ng-controller="MainController" class="container-fluid"> 
    <h2 ng-bind="currentVersion"></h2> 
    <hr> 
    <div ng-attr-dirr="hidden || undefined">Default div</div> 
</div> 

angular.module('myApp',[]) 
.directive('dirr', function(){ 
    return { 
    restrict:'AE', 
    template:'<div>Div from directive</div>' 
    } 
}) 
.controller('MainController',['$scope', function($scope){ 
    $scope.currentVersion = 'Angular 1.3.6'; 
    $scope.hidden = undefined; 
}]) 
; 

Answer 1

答えが真であるとスコープを使用することができますサンプルコードあなたは小さな問題のために作品を提供し、それは大規模なアプリケーションでこの問題を解決来るときあなたは、このアプローチを取ることにしたいことがあります。

Updated Pen

<div ng-app="myApp" ng-controller="MainController" class="container-fluid"> 
    <h2 ng-bind="currentVersion"></h2> 
    <hr> 
    <div dirr value="{{hidden}}">Default div</div> 
    </div> 

.directive('dirr', function($log){ 
    var directiveInstance = { 
    restrict:'AE', 
    scope:{ 
     value:'@' 
    }, 
    link: function (scope, element, attrs, ctrl) { 
     if(attrs.value === 'true'){ 
     console.log('directive on !!'); 
     $log.debug('element',element); 
     element[0].innerHTML = '<div>hello ' + attrs.value + '</div>'; 
     } 
     else { 
     console.log('directive off !!'); 
     } 
    } 
    } 
    return directiveInstance; 
}) 

これはより整頓され、あなたがのようなものがあるときngIfまたは別々のdiv内ngSwitchディレクティブを使用してコードを複製したくない場合があります：FYIあなたがあなた自身の変数を付けないようにする必要があり

<table> 
    <thead dirr value="{{statement}}"> 
    <tr> 
    <th> 
     CrazyStuffHere... 
    </th> 
    <th> 
     CrazyStuffHere... 
    </th> 
    .... 
    </tr> 
    </thead> 
</table> 

Answer 2

あなたは条件をチェックし、条件付きで、それを実行するためにAngularJSの作り付けのディレクティブng-ifを利用することができます。

例：

<div ng-if="{some_condition}"> 
    <dirr></dirr> <!--Execute the directive on the basis of outcome of the if condition--> 
</div> 

Answer 3

フォームのドキュメント

角度が提供するディレクティブの試合のすべてがそうたび名、タグ名、コメント、またはクラス名

属性angleは属性名と直接的に一致し、テンプレートをコンパイルし、HTMLに関係なくHTMLをレンダリングします属性値。

はとにかくあなたは、スコープの隠し財産を利用NG非表示template.soディレクティブで

angular.module（ 'て、myApp'、[]）

.directive('dirr',function(){ 
    return{ 
     restrict:'AE', 
     template:'<div ng-hide="hidden">Div from directive</div>', 
    } 
}) 
.controller('MainController',['$scope', function($scope){ 
    $scope.hidden=false; 
}]);