Question

我是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中使用它？

Answer 1

好吧，在对模板进行分析后，似乎没有任何多级元素，因此首先将模板转换为数组，如

  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指令管理菜单图
创建自定义指令，并在任何用户更改时，向其发送菜单数组并根据maych aginst the roles.attribute

我不知道对您有什么好处，也不知道如何使用提供的数据整合您的应用。

我唯一的建议是，从安全的角度来看它是一个很大的NO-NO，完全绘制它然后通过CSS / DOM操作隐藏不需要的项目

如果您的安全要求接近＆＃34;偏执狂＆＃34;等级，你甚至不应该建立上述阵列。而不是那样，你应该向服务器发出一个请求，该服务器应该只返回当前用户可以访问的项目的数组

很抱歉没有提供完整的示例。我希望有所帮助。

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

1 个答案: