angular.module('myApp')
    .directive('hasPermission', function(permissions) {
        return {
            link: function(scope, element, attrs) {
                 var value = attrs.hasPermission.trim();
                 var notPermissionFlag = value[0] === '!';
                 if(notPermissionFlag) {
                     value = value.slice(1).trim();
                 }
                
                 function toggleVisibilityBasedOnPermission() {
                     var hasPermission = permissions.hasPermission(value);
                     if(hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag) 	        {
                         element.show();
                     }
                     else {
                        element.hide();
                     }
                 }
                
                 toggleVisibilityBasedOnPermission();
                 scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
  }
        };
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js