如何實現一個包含家庭狀態的麪包屑作爲默認狀態，然後是之前的狀態和當前狀態？

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>