Question

有两个类似的问题：

我需要创建一个动态菜单，就像在第一个类似的问题中一样，我无法对我页面中的权限进行硬编码。 管理员可以创建自定义角色并选择此角色可以看到的菜单项。

<li class="dropdown"><img role="button" class="dropdown-toggle" data-toggle="dropdown" ng-src="{{avatarUrl}}" />
  <ul class="dropdown-menu pull-right" role="menu">
    <li ng-show="???"><a ng-click="action01()">Action one</a></li>
    <li ng-show="???"><a ng-click="action02()">Action two</a></li>
    <li ng-show="???"><a ng-click="action03()">Action tree</a></li>
    <li ng-show="???"><a ng-click="action04()">Action four</a></li>
  </ul>
</li>

我应该怎样想象我的策略？

Answer 1

我会创建类似于HeaderController的东西，并附加一个函数，告诉给定的角色是否可以执行给定的操作。据推测，您已将ACL存储在某处，因此您可以为其创建服务。像这样：

controller('HeaderController', ['$scope', 'Acl', function($scope, Acl) {

    $scope.roleCanDo = function(role, action) {
        return Acl.roleCanDo(role, action);
    }

}])

你的观点是这样的：

<li class="dropdown"><img role="button" class="dropdown-toggle" data-toggle="dropdown" ng-src="{{avatarUrl}}" />
  <ul class="dropdown-menu pull-right" role="menu">
    <li ng-show="roleCanDo(currentUser.role, 'action01')"><a ng-click="action01()">Action one</a></li>
    <li ng-show="roleCanDo(currentUser.role, 'action02')"><a ng-click="action02()">Action two</a></li>
    <li ng-show="roleCanDo(currentUser.role, 'action03')"><a ng-click="action03()">Action tree</a></li>
    <li ng-show="roleCanDo(currentUser.role, 'action04')"><a ng-click="action04()">Action four</a></li>
  </ul>
</li>

显然，实际代码将取决于您当前的系统，但您明白了。

Answer 2

实施Creating dynamic menu from database data using AngularJS

非常简单

假设我们的数据库中有一个用于导航菜单的表，例如

Table structure for dynamic menu

在下面编写数据库中的提取菜单代码

public JsonResult GetSiteMenu()
{
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var menu = dc.SiteMenus.ToList();
        return new JsonResult { Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}

这里是angularjs控制器

var app = angular.module('MyApp', []);
app.controller('menuController', ['$scope', '$http', function ($scope, $http) {
    $scope.SiteMenu = [];
    $http.get('/home/GetSiteMenu').then(function (data) {
        $scope.SiteMenu = data.data;
    }, function (error) {
        alert('Error');
    })
}])

HTML代码

<div ng-app="MyApp">
    <div ng-controller="menuController">
        @* Here first of all we will create a ng-template *@
        <script type="text/ng-template" id="treeMenu">
            <a href="{{menu.Url}}">{{menu.Name}}</a>
            @* We will create submenu only when available *@
            <ul ng-if="(SiteMenu | filter:{ParentID : menu.ID}).length > 0">
                <li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.ID}" ng-include="'treeMenu'"></li>
            </ul>
        </script>
        <ul class="main-navigation">
            @* Here we will load only top level menu *@
            <li ng-repeat="menu in SiteMenu | filter:{ParentID : 0}" ng-include="'treeMenu'"></li>
        </ul>
    </div>
</div>

如何根据用户的权限在angularjs中创建动态菜单？

2 个答案: