(function() { 'use strict'; var app = angular.module('app', []); app.factory('app.svc.auth', [svcAuth]); app.directive('authorizeScope', ['app.svc.auth', dirAuthScope]); app.controller('app.ctrl.grid', ['app.svc.auth', ctrlGrid]); function svcAuth() { //simple claims container for demo purposes var claims = { 'Name': 'Ozkary', 'Title': 'Tech', 'app.delete': true, 'app.edit': true, 'app.create': true }; function hasClaim(key) { return claims[key];//todo handle multiple claims } return { claims: claims, hasClaim:hasClaim }; } function dirAuthScope($svcAuth) { return { restrict: 'E', scope: { authorizeMapping: '&', authorizeCallback: '&', },//isolate scope link: function (scope, elem, attrs) { console.log('loading isolate directive'); var watch = function () { //get the claim to variable maps - execute call for claim mapping var claims = scope.authorizeMapping()(); var callback = scope.authorizeCallback(); if (claims && typeof (claims) === 'object') { for (var item in claims) { var claim = claims[item]; var result = $svcAuth.hasClaim(claim); claims[item] = result; } callback(claims); } } scope.$watch(watch); } }; }; function ctrlGrid($svcAuth) { var ctrl = this; var storage = angular.copy($svcAuth.claims); ctrl.claims = $svcAuth.claims; ctrl.edit = function(key) { if (ctrl.selected === key) { ctrl.selected = null; } else { ctrl.selected = key; } } ctrl.remove = function(key){ delete ctrl.claims[key]; } /* * creates the mapping between controller variables to claim tag. */ ctrl.claimMapping = function () { ctrl.editAccess = false; ctrl.deleteAccess = false; var mapping = {}; mapping['editAccess'] = 'app.edit'; mapping['deleteAccess'] = 'app.delete'; //add other var/tag map return mapping; } /* * sets the controller variables to true/false */ ctrl.claimResults = function (claims) { ctrl.editAccess = claims['editAccess'];//set to true/false ctrl.deleteAccess = claims['deleteAccess']; } } })();
<div ng-app="app"> <div class="body-content panel-body"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <h4 class="page-header">Isolate Scope Directive Claims Authorization - ozkary.com</h4> </div> <!-- /.col-lg-12 --> </div> <div class="row" ng-controller="app.ctrl.grid as ctrl"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> My Claims </div> <!-- /.panel-heading --> <div class="panel-body text-center" > <authorize-scope authorize-mapping="ctrl.claimMapping" authorize-callback="ctrl.claimResults"> </authorize-scope> <ul class="list-group text-left"> <li ng-repeat="(key,value) in ctrl.claims" class="list-group-item"> <label style="width:150px;">{{key}}</label> <input type="text" class="form-control-static form-input" maxlength="25" ng-disabled="key !== ctrl.selected" ng-model="ctrl.claims[key]" /> <span class="pull-right"> <a ng-show="ctrl.deleteAccess" class="cursor-pointer" title="remove claim" ng-click="ctrl.remove(key)"><i class="fa fa-trash text-danger fa-2x"></i></a> <a ng-show="ctrl.editAccess" class="cursor-pointer" title="edit claim" ng-click="ctrl.edit(key)"><i class="fa fa-edit fa-2x"></i></a> </span> </li> </ul> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <!-- /.col-lg-12 --> </div> </div> </div> </div> <br/>