angular menu - meetbill/butterfly-fe GitHub Wiki

动态控制侧边栏菜单

动态控制侧边栏菜单主要就是根据用户的角色自动更新 static/tpl/blocks/nav.html 文件

1 html 基础

列表标签

<li>表示列表项
<ul>表示无序排列
<ol>表示有序排列


即在<ul> </ul>中写入<li>可以构成一个无序列表，而在<ol> </ol>中写入<li>构成的是一个有序列表

2 静态菜单

static/tpl/blocks/nav.html 静态菜单

<!-- list -->
<ul class="nav">
    <!-- 导航 -->
    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
        <span translate="aside.nav.HEADER">Navigation</span></li>
    <!--/导航 -->
    <li>
        <!-- 一级菜单 -->
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <i class="glyphicon glyphicon-stats icon text-primary-dker"></i>
            <span class="font-bold" translate="aside.nav.DASHBOARD">Dashboard</span></a>
        <!--/一级菜单 -->
        <!-- 二级菜单 -->
        <ul class="nav nav-sub dk">
            <li ui-sref-active="active">
                <a ui-sref="app.dashboard-v1">
                    <span>仪表盘 v1</span></a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.dashboard-v2">
                    <b class="label bg-info pull-right">N</b>
                    <span>仪表盘 v2</span></a>
            </li>
        </ul>
        <!-- /二级菜单 -->
    </li>
</ul>
<!-- / list -->

3 动态菜单

3.1 前端界面

static/tpl/blocks/nav.html

<!-- list -->
<ul class="nav" ng-controller="navController">
    <!-- 导航 -->
    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
        <span translate="aside.nav.HEADER">Navigation</span></li>
    <!--/导航 -->
    <li ng-repeat="first in menus | orderBy:'sort'">
        <!-- 一级菜单 -->
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <i class="glyphicon" ng-class="first.glyphicon"></i>
            <span class="font-bold" translate="">__ first.description __</span></a>
        </a>
        <!--/一级菜单 -->
        <ul  ng-repeat="second in first.children | orderBy:'sort'" class="nav nav-sub dk">
            <!-- 二级菜单 -->
            <li ui-sref-active="active">
                <a ui-sref="__second.sref__">
                    <span>__second.description__</span>
                </a>
            </li>
            <!-- /二级菜单 -->
        </ul>
    </li>
</ul>
<!-- / list -->

3.2 路由

static/js/config.router.js

.state('app', {
    abstract: true,
    url: '/app',
    templateUrl: layout,
    // 新增此行
    resolve: load(["static/js/controllers/blocks/nav.js"])
})

3.3 controller

static/js/controllers/blocks/nav.js

'use strict';

app.controller('navController', ['$scope', function($scope) {
    $scope.menus = [
        {
            "description":"仪表盘",
            "sort": 1,
            //柱状图小图标
            "glyphicon": "glyphicon-stats icon text-primary-dker",
            "children":[
                {
                    "sref":"app.dashboard-v1",
                    "description":"主页展示"
                },
                {
                    "sref":"app.dashboard-v2",
                    "description":"主页展示2"
                },
                {
                    "sref":"app.chart",
                    "description":"chart"
                },
            ]
        },
        {
            "description":"常用页面",
            "sort": 1,
            "glyphicon": "glyphicon-cloud",
            "children":[
                {
                    "sref":"app.page.profile",
                    "description":"个人主页"
                },
                {
                    "sref":"app.page.search",
                    "description":"搜索页"
                },
                {
                    "sref":"app.docs",
                    "description":"Angulr 文档"
                },
            ]
        },
    ];
}]);
  • description : 前端页面展示信息
  • sort: 前端菜单排序(数字越小，越在前面)
  • glyphicon: Bootstrap 字体图标
  • children: 子页面
    • sref: config.router.js 中的 ui state
    • description: 前端页面展示信息
    • sort: 前端菜单排序(数字越小，越在前面)
⚠️ **GitHub.com Fallback** ⚠️