angularJs实现动态控制侧边栏菜单

应项目的不同所以菜单的层级也不固定，所以在这里我写了5层菜单，哈哈。首先是html代码。

//菜单html代码

<ul class="page-sidebar-menu">
    <li ng-repeat="menu in menus">
        <a ui-sref={{menu.router}} style="cursor: pointer"  ng-click="getMenuName([menu])">
            <i class={{menu.class}}></i>
            <span class="title">{{menu.name}}</span>
            <span class={{menu.span}}></span>
        </a>
        <ul class="sub-menu">
            <li  ng-repeat="child in menu.children">
                <a ui-sref="{{child.router}}" style="cursor: pointer" ng-click="getMenuName([menu,child])">
                    <i class={{child.class}}></i> {{child.name}}
                    <span class={{child.span}}></span>
                </a>
                <ul class="sub-menu">
                    <li ng-repeat="third in child.thirds">
                        <a ui-sref={{third.router}} style="cursor: pointer" ng-click="getMenuName([menu,child,third])">
                            <i class="icon-cogs"></i> {{third.name}}
                            <span class={{third.span}}></span>
                        </a>
                        <ul class="sub-menu">
                            <li ng-repeat="four in third.fourth">
                                <a ui-sref={{four.router}} style="cursor: pointer" ng-click="getMenuName([menu,child,third,four])">
                                    <i class={{four.class}}></i>{{four.name}}
                                    <span class={{four.span}}></span>
                                </a>
                                <ul class="sub-menu">
                                    <li ng-repeat="five in four.fifth">
                                        <a ui-sref={{five.router}} style="cursor: pointer" ng-click="getMenuName([menu,child,third,four,five])">
                                            {{five.name}}
                                            <span class={{five.span}}></span>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

//面包屑html代码

   <div>
            <ul class="breadcrumb">
                 <li ng-repeat="breadcrumb in breadcrumbs">
                     <i class="icon-home breadcrumb-home" ng-if="$index<=0"></i>
                     <a href="#" class="breadcrumb-text">{{breadcrumb.name}}</a>
                     <i class="icon-angle-right" ng-if="$index!=breadcrumbs.length-1"></i>
                 </li>
             </ul>
        </div>

在相对应控制菜单的controller里调用菜单数据，并完成页面面包屑的操作。

//获取菜单数据

$scope.getMenulist = function () {
            $http.get(ctx+"/app/common/menuList.json").success(function (data) {
                $scope.menus = data;
                $rootScope.menus = data;
            })
        };
        $scope.getMenulist()；

//面包屑

$scope.getMenuName = function (menuList) {/* [menu,child,third] */
            if (menuList.length > 0 && menuList[menuList.length - 1].router) {
                $rootScope.breadcrumbs = menuList;
                $scope.breadcrumbs = $rootScope.breadcrumbs;

            }
        };