如何在AngularJS中有条件地应用指令？

I want to apply a simple directive conditionally using ngAttr. I don't understand why my directive is always displayed. So if I have an undefined / false variable I want to apply my directive: dirr.

我想使用ngAttr有条件地应用一个简单的指令。我不明白为什么我的指令总是显示出来。所以,如果我有一个undefined / false变量,我想应用我的指令:dirr。

When using ngAttr, the allOrNothing flag of $interpolate is used, so if any expression in the interpolated string results in undefined, the attribute is removed and not added to the element.

使用ngAttr时,将使用$ interpolate的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;
 }])
;

3 个解决方案

#1

You can make use of AngularJS's inbuilt directive ng-if to check for the condition and execute it conditionally.

您可以使用AngularJS的内置指令ng-if来检查条件并有条件地执行它。

Example:

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

#2

Form documentation

All of the Angular-provided directives match attribute name, tag name, comments, or class name

所有Angular提供的指令都匹配属性名称,标记名称,注释或类名称

so whenever angular matches a diretive with attribute name,it compiles the template and renders the html irrespective of attribute value.

因此,只要angular匹配带有属性名称的diretive,它就会编译模板并呈现html,而不管属性值如何。

anyway you can use scope in directive template.so use ng-hide with scope's hidden property

无论如何,你可以在指令template中使用scope。所以使用ng-hide和scope的hidden属性

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

#3

The answers are true and the sample code you provided works for small issues, but when it comes resolving this problem on large applications you may want to take this approach:

答案是正确的,您提供的示例代码适用于小问题,但是当它解决大型应用程序上的此问题时,您可能希望采用这种方法:

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

This is more tidy and you may not want to duplicate your code using ngIf or ngSwitch directives in seperate divs when you have something like:

这更整洁,当你有类似的东西时,你可能不想在单独的div中使用ngIf或ngSwitch指令复制你的代码:

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

#1