如何实现一个包含家庭状态的面包屑作为默认状态，然后是之前的状态和当前状态？

Question

我有一个要求，以创建一个面包屑其中，它看起来应该像这样的功能，

首页/创建用户/登录

这表明家庭为默认状态，并创建用户是先前访问的页面，Login是当前页面。我试过 ncyBreadcrumb但它不符合我的目的，如果有任何人请帮助我。

Answer 1

当你定义的路由/状态（取决于您是否使用ngRouter/uiRouter），只需添加一个面包屑对象，以它像这样：

$stateProvider 
    .state('courses', { 
     url: '/create', 
     template: ...., 
     controller: ...., 
     breadcrumbs: [ 
     { 
      name: Home, 
      url: '/home' 
     }, 
     { 
      name: Create User, 
      url: '/create' 
     } 
     ] 
    }) 

而在你的控制器，注入breadcrumbs作为依赖，和ng-repeat了他们对你的模板

//Controller 
.controller('mycontroller', function mycontroller($scope, breadcrumbs) { 
    $scope.breadcrumbs = breadcrumbs; 
} 



//Template 
<span class="breadcrumbs"> 
    <a ng-repeat="breadcrumb in breadcrumbs" ng-bind="::breadcrumb.name" href="{{breadcrumb.url}}"></a> 
</span> 

Answer 2

我已经使用状态改变的成功来获得当前和以前的状态 和我需要的是工作一样。

以下是我在主模块JS做了（在我的情况app.js）：

angular.module('app').run(['$rootScope', function ($rootScope) { 
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, error) { 
//goes here your code to manage states and their respective labels 
      $rootScope.breadcrumbStates = []; 
      $rootScope.breadcrumbLabels = []; 
      $rootScope.breadcrumbStates.push(fromState.name); 
      $rootScope.breadcrumbStates.push(toState.name); 
      $rootScope.breadcrumbLabels.push(fromState.label); 
      $rootScope.breadcrumbLabels.push(toState.label); 
}]); 

HTML

<ul class="breadcrumb"> 
     <li ng-repeat="breadcrumb in breadcrumbStates track by $index">    
       <a ui-sref="{{breadcrumb}}">{{breadcrumbLabels[$index]}}</a> 
     </li> 
    </ul>