How to create dynamic menu base on roles using AngularJS

Question

I am very new to AngularJS.

template.js

 $templateCache.put('template/sidebar-left.html',
        "<div class=\"sidebar-inner c-overflow\"><div class=\"profile-menu\"><a href=\"\" toggle-submenu><div class=\"profile-pic\"><img src=\"img/profile-pics/1.jpg\" alt=\"\"></div><div class=\"profile-info\">Malinda Hollaway <i class=\"zmdi zmdi-caret-down\"></i></div></a><ul class=\"main-menu\"><li><a data-ui-sref=\"pages.profile.profile-about\" data-ng-click=\"mactrl.sidebarStat($event)\"><i class=\"zmdi zmdi-account\"></i> View Profile</a></li><li><a href=\"\"><i class=\"zmdi zmdi-input-antenna\"></i> Privacy Settings</a></li><li><a href=\"\"><i class=\"zmdi zmdi-settings\"></i> Settings</a></li><li><a href=\"\"><i class=\"zmdi zmdi-time-restore\"></i> Logout</a></li></ul></div><ul class=\"main-menu\"><li data-ui-sref-active=\"active\"><a data-ui-sref=\"home\" data-ng-click=\"mactrl.sidebarStat($event)\"><i class=\"zmdi zmdi-home\"></i> Dashboard</a></li><li data-ui-sref-active=\"active\"><a data-ui-sref=\"timeline\" data-ng-click=\"mactrl.sidebarStat($event)\"><i class=\"zmdi zmdi-layers\"></i>Timeline</a></li>...");

controller.js

this.loginF = function(user) {

    $http.post("data/login.php", user).then(function(userData) {

        $rootScope.login = userData.data
        if( $rootScope.login == "failed" ) {
            alert(JSON.stringify($rootScope.login))
        } else {
            window.location.assign("home.html");
        }
    })
}   

Here is my template.js code for sidebar. I need to set this menu items as per user role. I don't know how to make this items dynamic. I have user role assigned in $rootScope. How can I use that in template.js?

Answer 1

Well, after analizing your template, it seems doesn't have any multilevel elements, so first approximation will be to convert your template into an array, like

  var profMenu = [
  {title: 'View profile', icon :'zmdi zmdi-account', link:'pages.profile.profile-about', roles: ['role1','role2']},
  {title: 'Privacy Settings', icon :'zmdi zmdi-input-antenna', link:'', roles: ['role1','role2']},
  {title: 'Settings', icon :'zmdi zmdi-input-antenna', link:'', roles: ['role1','role2']},
  {title: 'Logout', icon :'zmdi zmdi-time-restore', link:'', roles: ['role1','role2']}
]

Then you have two options:

1. Manage the menu drawing with ng-if/ng-repeat directives

2. Create a custom directive and on ANY user change, send to it the menu array(s) And draw any of the menu items depending onits maych aginst the roles.attribute

I don't know what's better for you, nor how to integrate in your app with the data provided.

My only advice is that it's a BIG NO-NO , from a security point of view to draw it completely and then Hide unwanted items via CSS/DOM manipulation

If your security requirements are near a "paranoid" level, you don't even should build the aforementioned array. Instead of that, you should make a request to the server that should return an array with ONLY the items that current user can access

Sorry for not providing a complete example. I hope that helps.