Restricting Views and Functionality

  • Depending on how granular your roles are, you may want to be able to re-use the same views and controllers for all users, but restrict which fields are visible, or which actions can be taken
  • Can create a directive that hooks into your permission system to enable/disable, or hide parts of the UI
  • Keep in mind, this is to help with the UI/UX

Possible implementation:

'use strict';
  .module('ngcCourse', [
  .directive('ngcRequires', function () {
    return {
      restrict: 'EA',
      transclude: true,
      replace: false,
      template: `<span
      scope: {
        permissions: '=',
        anyPermission: '='
      controller: 'NgcRequiresController',
      controllerAs: 'ngcRequires'
  .controller('NgcRequiresController', function ($scope, contentPermissionFilter) {

    (function init(vm) {
      angular.extend(vm, {
        hasPermission: false,

      $scope.$watchGroup(['permissions','anyPermission'], function (newValue) {
        if (newValue) {

          var permissionRequest = {
            requiredPermissions: newValue[0],
            anyPermissions: newValue[1]
          // Create a custom service that can handle checking
          // permissions based on your needs. Could be done
          // client side, or possibly make an API request

            .then(function (permissionCheckResult) {
                vm.hasPermission = permissionCheckResult;

Example use:

<button ngc-requires permissions="['tasks.canAdd']" ng-click="addTask()">
Add Task