up vote 0 down vote favorite

I have a directive which I render only if my authentication service tells me so:

<div my-loggedin-directive ng-if="security.isAuthenticated()"></div>

The directive itself is quite empty :

.directive('myLoggedinDirective', [
    function() {
        return {
            templateUrl: 'modules/myLoggedinDirective.tpl.html',
            restrict: 'A',
            replace: true,
            link: function($scope) {
                 $scope.$on('$destroy', function() {
                     console.log('$destroy');
                 });
            }
        };
    }
]);

Since my directive should be always rendered when I'm logged in, the ngIf logic should be inside the directive declaration, and not in a ng-if (the directive without the ngIf would be totally broken).

How can I change the directive code (injecting the test on the security service inside the directive declaration) knowing that I want the same behavior as the ngIf ? :

  • directive present in the DOM only when nfIf resolves to true
  • automatic calling of $destroy when nfIf resolve to false) ?

I tried to use compile function and a watcher to watch security.isAuthenticated() without success

share|improve this question
up vote 0 down vote accepted

Declare extra directive attribute that will pass security object into your directive:

<div my-loggedin-directive my-security='security'></div>

And directive should include scope, make sure it uses two-way binding:

.directive('myLoggedinDirective', [
function() {
    return {
        scope: {
            security: "=mySecurity"
        }
        templateUrl: 'modules/myLoggedinDirective.tpl.html',
        restrict: 'A',
        replace: true,
        link: function($scope) {
             $scope.$on('$destroy', function() {
                 console.log('$destroy');
             });

             $scope.$watch('security', function(newVal, oldVal) {
                 if (newVal.isAuthenticated()) {
                 // do something
                 } else {
                 // do something
                 }
             });
        }
    };
}

]);

And now you can access $scope.security variable in your temple myLoggedinDirective.tpl.html

<div ng-if="security.isAuthenticated()">...</div>
share|improve this answer
1  
Thanks it helped me ;) I also injected service as a dependency to get rid of the extra attribute. – Cétia Jun 10 '14 at 12:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.