How to apply directive conditionally in AngularJS?

Question

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.

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.

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

FYI you should avoid naming your own variables, directives etc under the ng namespace ($scope.ngVar). Thats for core angular components and could cause confusion for future developers. — ste2425
– ste2425, Commented Feb 25, 2016 at 9:12

Shashank · Accepted Answer · 2016-02-25 09:16:52Z

4

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

Example:

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

answered Feb 25, 2016 at 9:16

Shashank

2,1002 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

que1326 Over a year ago

I can't use ng-if in my context

Shashank Over a year ago

why, wat's the issue? or go with ng-switch.

Pavan Teja · Accepted Answer · 2016-02-25 10:01:22Z

1

Form documentation

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

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

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

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

edited Feb 25, 2016 at 10:01

answered Feb 25, 2016 at 9:20

Pavan Teja

3,2021 gold badge18 silver badges22 bronze badges

Comments

que1326 · Accepted Answer · 2016-02-25 13:03:07Z

0

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:

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

answered Feb 25, 2016 at 13:03

que1326

2,3454 gold badges43 silver badges59 bronze badges

4 Comments

ste2425 Over a year ago

Except any angular bindings in your added HTML won't be bound. You would need to use the $compile service, not jquery/jqlite.

que1326 Over a year ago

@ste2425 provide example, I'm not sure what you meant.

ste2425 Over a year ago

Hope this will help. jsfiddle.net/q9cqquLe It may be better to have this logic not in every directive, but have a single utility one that does this logic for you being passed the directive name to conditionally apply.

que1326 Over a year ago

Oohh, I see now, yes, that makes sense. Provide a thread answer so I can accept it

Collectives™ on Stack Overflow

How to apply directive conditionally in AngularJS?

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related