如何使用AngularJS创建基于角色的动态菜单

我对AngularJS非常新颖。如何使用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"); 
     } 
    }) 
}

这是我template.js的侧边栏的代码。我需要根据用户角色设置此菜单项。我不知道如何使这个项目动态。我在$ rootScope中分配了用户角色。我如何在template.js中使用它？

来源

2016-11-04 DD77

您可以使用指令并发送所需的数据来自定义边栏。 – codeomnitrix

如何自定义侧边栏？ @codeomnitrix – DD77

看看这个plunkr https://plnkr.co/edit/XtTHiUdUhOCbLCoDKC3t?p=preview – codeomnitrix

好，而分析你的模板后，似乎没有任何多的元素，所以第一次近似将是你的模板转换成一个数组，像

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']} 
]

这时你有两种选择：

管理菜单与NG-IF/NG重复指令画
创建自定义指令和上的任何用户的变化，发送给它的菜单ARR AY（S）和作出任何根据onits菜单项maych aginst的roles.attribute

我不知道什么是对你更好，也不知道怎样去与提供的数据集成到应用中。

我唯一的建议是，这是一个很大的禁忌，从安全角度考虑，以彻底划清它，然后隐藏通过CSS/DOM操作

不需要的物品如果您的安全要求是附近的“偏执狂”级别，你甚至不应该建立上述数组。相反，你应该向服务器发出一个请求，该服务器只返回当前用户可以访问的数组。

对不起，没有提供完整的示例。我希望有所帮助。

来源

2016-11-22 02:12:20 mtsdev

如何使用AngularJS创建基于角色的动态菜单

回答

相关问题