如何使用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創建基於角色的動態菜單

回答

相關問題