AngularJS: What's the best practice to add ngIf to a directive programmatically?

Question

I want to create a directive that checks if an element should be present in the dom based on a value coming from a service (e.g. check for a user role).

The corresponding directive looks like this:

angular.module('app', []).directive('addCondition', function($rootScope) {     return {         restrict: 'A',         compile: function (element, attr) {           var ngIf = attr.ngIf,               value = $rootScope.$eval(attr.addCondition);            /**            * Make sure to combine with existing ngIf!            * I want to modify the expression to be evalued by ngIf here based on a role             * check for example            */           if (ngIf) {             value += ' && ' + ngIf;           }            attr.$set('ng-if', value);         }     }; }); 

At the end the element has the ng-if attribute attached but somehow it doesn't apply to the element and it is still existing in the dom. So this is obviously a wrong approach.

This fiddle shows the problem: http://jsfiddle.net/L37tZ/2/

Who can explain why this happens? Is there any other way a similar behaviour could be achieved? Existing ngIfs should be considered.

SOLUTION:

Usage: <div rln-require-roles="['ADMIN', 'USER']">I'm hidden when theses role requirements are not satifisfied!</div>

.directive('rlnRequireRoles', function ($animate, Session) {    return {     transclude: 'element',     priority: 600,     terminal: true,     restrict: 'A',     link: function ($scope, $element, $attr, ctrl, $transclude) {       var block, childScope, roles;        $attr.$observe('rlnRequireRoles', function (value) {         roles = $scope.$eval(value);         if (Session.hasRoles(roles)) {           if (!childScope) {             childScope = $scope.$new();             $transclude(childScope, function (clone) {               block = {                 startNode: clone[0],                 endNode: clone[clone.length++] = document.createComment(' end rlnRequireRoles: ' + $attr.rlnRequireRoles + ' ')               };               $animate.enter(clone, $element.parent(), $element);             });           }         } else {            if (childScope) {             childScope.$destroy();             childScope = null;           }            if (block) {             $animate.leave(getBlockElements(block));             block = null;           }         }       });     }   }; }); 

It is very important to add the priority in the directive, otherwise other directives attached to that element are not evaluated!

Answer 1

You can reuse ngIf in your own directive like this:

/** @const */ var NAME = 'yourCustomIf';  yourApp.directive(NAME, function(ngIfDirective) {   var ngIf = ngIfDirective[0];    return {     transclude: ngIf.transclude,     priority: ngIf.priority,     terminal: ngIf.terminal,     restrict: ngIf.restrict,     link: function($scope, $element, $attr) {       var value = $attr[NAME];       var yourCustomValue = $scope.$eval(value);        $attr.ngIf = function() {         return yourCustomValue;       };       ngIf.link.apply(ngIf, arguments);     }   }; }); 

and then use it like this

<div your-custom-if="true">This is shown</div> 

and it will use all the "features" that come with using ngIf.