//hasPermission.js
angular.module('myApp')
    .directive('hasPermission', function(permissions) {
      return {
        link: function(scope, element, attrs) {

          var value = attrs.hasPermission.trim();
          var splitSpace = value.split(' ');

          function toggleVisibilityBasedOnPermission() {
            for (var i = 0; i < splitSpace.length; i++) {
              if (splitSpace[i].length > 2) {
                var hasPermission = permissions.hasPermission(splitSpace[i]);
                value = value.replace(splitSpace[i], hasPermission);
              }
            }

            var hasPermission = eval(value);
            if (hasPermission) {
              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