1

有两个类似的问题：

我需要创建一个与第一个类似问题完全相同的动态菜单，但我无法硬编码页面中的权限。管理员可以创建自定义角色并选择该角色可以看到的菜单项。

<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>

我应该如何想象我的策略？

4

2 回答 2

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>

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

于 2013-05-29T15:58:18.313 回答
0

使用AngularJS实现从数据库数据创建动态菜单非常简单

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

动态菜单的表结构

编写以下代码以从数据库中获取菜单

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>
于 2015-12-22T05:02:59.407 回答