Question

我在下面的三个状态下实现了面包屑，从仪表板用户可以选择一个导航到edit.process的进程，然后用户也可以使用面包屑超链接从编辑进程返回到仪表板。因此，当用户处于app.search状态时，他可以选择将导航到edit.process状态的进程，这是问题现在这里用户只能选择返回Dashboard.But我想在用户导航时实现逻辑来自app.search州的流程我希望在edit.process州显示app.search breadcrumb超链接，以便用户可以返回他来自的地方......

app.js

.state('app.home', {
            url: '/',
            templateUrl: 'views/riskHomePage/riskAssesmentHomePage.html',
            controller: 'HomeCtrl',
            data: {
                authenticate: true
            },
            breadcrumb: {
              title: 'Dashboard',
              path: ['app.home']
          }
        })

   .state('app.editProcess', {
            url: '/process/:processId/:refresh?:from',
            templateUrl: 'views/process/createEditProcessContent.html',
            controller: 'ProcessCtrl',
            data: {
                authenticate: true
            },
            resolve: {
                existingProcess: function($http, $stateParams, $rootScope){
                    $rootScope.showLoader = true;
                   return $http.get('app/prcs/rest/process/'+ $stateParams.processId);
                }
            },
            breadcrumb: {
              title: 'Edit Process',
              path: ['app.home', 'app.editProcess']
          }
        })

.state('app.search', {
            url: '/viewSearchInv',
            templateUrl: 'views/viewAll/viewSearchInv.html',
            controller: 'ViewSearchInvCtrl',
            data: {
                authenticate: true
            },
            breadcrumb: {
              title: 'View Search PRC inventory',
              path: ['app.home','app.search']
            }
        })

Answer 1

你想要创建一个面包屑服务，然后将其注入每个控制器。

这是一个很好的教程http://milestone.topics.it/2014/03/angularjs-ui-router-and-breadcrumbs.html

我过去做过这种方式的另一种方法是在$ rootScope上保留一系列面包屑。像这样实例化。

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.breadcrumbs = [];
 })

然后在每个控制器中，我将连接回该状态的面包屑推送到面包屑阵列。通常我的breadcrumb对象有显示文本和链接/ ui-router状态引用。

.controller('myCtrl', function($scope, $rootScope) {
    $rootScope.breadcrumbs.push({ title: "First Breadcrumb", state: "stateName" })
})

然后显示面包屑使用ng-repeat并使用ng-click功能处理任何面包屑的选择，该功能将面包屑修剪为选定的面包屑并加载相应的状态

Answer 2

你需要使用ncyBreadcrumb。这种方式不可能。这个链接对你有帮助 How to use ncy-breadcrumb in child state of abstract parent

面包屑如何记住路径？

2 个答案: