JSFiddle - React, Tailwind, and code Playground

by Tapan Acharjee

HTML

<div ng-app="myApp" ng-controller="testCtrl">
 <h1 restrict access="user">Hello user</h1>
    <h1 restrict access="guest">Hello guest</h1>
    <h1 restrict access="admin">Hello admin</h1>
</div>

JavaScript

var app = angular.module('myApp', []);

app.service('authService', function(){

  var user = {};
  user.role = 'guest';
  return{
    getUser: function(){
      return user;
    },
    generateRoleData: function(){
      /*this is resolved before the router loads the view and model*/
      /*...*/
    }
  }
});

app.directive('restrict', function(authService){
	return{
		restrict: 'A',
		prioriry: 100000,
		scope: false,
		link: function(){
			// alert('ergo sum!');
		},
		compile:  function(element, attr, linker){
			var accessDenied = true;
			var user = authService.getUser();
			
			var attributes = attr.access.split(" ");
			for(var i in attributes){
				if(user.role == attributes[i]){
					accessDenied = false;
				}
			}


			if(accessDenied){
				element.children().remove();
				element.remove();			
			}

		}
	}
});

app.controller('testCtrl', function($scope){
console.log('ergo sum');
});