动态面包屑设置

1.上层路由

上层的config路由设置，上层相当于中间层的入口，获取url中的参数key 以及.state中的data属性

.state('rs.SPRING_BOOT', {

    url:"/SPRING_BOOT/:key",

    templateUrl:"pages/probes/tomcat/tomcatoverview.html",

    data: {pageTitle:'Spring Boot', routeName:'SPRING_BOOT'},

    controller:'TomcatoverviewCtrl',

    resolve: {
                 loadPlugin:function ($ocLazyLoad) {

                       return $ocLazyLoad.load([
                              {
                                  files: ['js/plugins/sparkline/jquery.sparkline.min.js']
                               } 
                        ]);      
                  }
      }
  })

2.中间层controller

即Tomcatoverview这一页的controller
pageTitle,routeName 参数获取
以及传递、回传路由文件中URL项内设定的变量key，key的传递和回传保证跳转页面时不丢失数据，很关键。

(function() {

'use strict';

    angular.module('inspinia')

    .controller('TomcatoverviewCtrl', ['$scope', '$http', '$state', '$stateParams', '$window', 'AuthService',

            function ($scope, $http, $state, $stateParams, $window, authService) {

                $scope.key = $stateParams.key;    

                $scope.pageTitle = $state.current.data.pageTitle;

                $scope.routeName = $state.current.data.routeName;

            }

]);

})();

中间层HTML 路由<ui-sref>标签配置

<a ui-sref="rs.TOMCATalertmanagement({key: '{{key}}', title: '{{pageTitle}}', route: '{{routeName}}'})">

    <div class="col-lg-3">
        <div class="ibox">
            <div class="ibox-content">
                <h5 class="m-b-md">{{'告警管理'|translate}}
                <h2 class="text-danger">
                    <i class="fa fa-warning"></i> Alert
                <small>{{'Alarm information'|translate}}
             </div>
         </div>
    </div>
</a>

注释1：

($stateParams.XX 这种写法是从路由文件中定义的url项中获取参数，例如alertmanagement的路由url设置中，url:"/TOMCATalertmanagement/:key/:title/:route",的key,title,route三项

url:"/TOMCATalertmanagement/:key/:title/:route")

注释2：

$state.current.data.routeName，获取config文件中.state里面的的data 属性中的routName值，注意不要忽略current关键字，它代表当前路由

3.第三层路由设置、JS、HTML

第三层：传递参数key，title，route以及data属性，

/*** Alertmanagement ***/

.state('rs.TOMCATalertmanagement', {

    url:"/TOMCATalertmanagement/:key/:title/:route",

    templateUrl:"pages/probes/tomcat/alertmanagement/tomcatalertmanagement.html",

    data: {pageTitle:'Alertmanagement' },

    controller:'TomcatalertmanagementCtrl',

    resolve: {

                loadPlugin:function ($ocLazyLoad) {

                return $ocLazyLoad.load([

                //calendar

                {

                    insertBefore:'#loadBefore',

                    files: ['css/plugins/fullcalendar/fullcalendar.css','js/plugins/fullcalendar/fullcalendar.min.js']

                },

                {

                    name:'ui.calendar',

                    files: ['js/plugins/fullcalendar/calendar.js']

                },

                //forms

                {

                    name:'ui.knob',

                    files: ['js/plugins/jsKnob/jquery.knob.js','js/plugins/jsKnob/angular-knob.js']

                },

                {

                    name:'ui.select',

                    files: ['js/plugins/ui-select/select.min.js', 'css/plugins/ui-select/select.min.css']

                },

                //submit button

                {

                    files: ['js/plugins/sweetalert/sweetalert.min.js', 'css/plugins/sweetalert/sweetalert.css']

                },

                {

                    name:'oitozero.ngSweetAlert',

                    files: ['js/plugins/sweetalert/angular-sweetalert.min.js']

                 }

            ]);

      }

    }

})

4.面包屑标签的实现

通过$stateParams注入，引用传递过来的变量

$scope.key = $stateParams.key;

$scope.title = $stateParams.title;

$scope.route = $stateParams.route;

然后在面包屑上引用标签，即可动态显示路径：

<a ui-sref="rs.{{route}}({key: '{{key}}'})">{{title}}</a>

总结：

---

$stateParams 是获取已在路由url项内定义的参数，如key/:title/:route 这些，它们传递则需要在html中写，如下

<a ui-sref="rs.TOMCATalertmanagement({key: '{{key}}', title: '{{pageTitle}}', route: '{{routeName}}'})">

---

$state.current.data.pageTitle

current代表当前，即当前层中data属性中的值