我对 AngularJS 很陌生。
模板.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 代码。我需要根据用户 Angular 色设置此菜单项。我不知道如何使该项目动态。我在 $rootScope 中分配了用户 Angular 色。我如何在 template.js 中使用它?
最佳答案
嗯,在分析你的模板之后,它似乎没有任何多级元素,所以第一个近似是将你的模板转换为数组,例如
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-repeat 指令管理菜单绘制
创建一个自定义指令,并在任何用户更改时,向其发送菜单数组,并根据其可能的 Angular 色属性绘制任何菜单项
我不知道什么对您更好,也不知道如何将所提供的数据集成到您的应用中。
我唯一的建议是,从安全 Angular 来看,完全绘制它,然后通过 CSS/DOM 操作隐藏不需要的项目,这是一个很大的禁忌
如果您的安全要求接近“偏执”级别,您甚至不应该构建上述数组。相反,您应该向服务器发出请求,该请求应返回一个仅包含当前用户可以访问的项目的数组
很抱歉没有提供完整的示例。我希望这会有所帮助。
关于javascript - 如何使用 AngularJS 创建基于角色的动态菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40418640/