ホーム状態をデフォルトとして、以前の状態と現在の状態を含むブレッドクラムをどのように実装できますか？

Question

私は、それがどのように見えると、このような機能すべきでブレッドクラムを作成するための要件、

ホーム/ /ユーザー作成のホームがデフォルトの状態であることを意味

ログインし、作成を持っていますユーザーは以前に訪問したページであり、ログインは現在のページです。私は試しました ncyBreadcrumbしかし、それは私の目的を果たしていない、いずれか1つ私にこれを手伝ってください。あなたは（あなたがngRouter/uiRouterを使用するかどうかに応じて）あなたのルート/状態を定義

Answer 1

、ちょうどそのようにそれにブレッドクラムオブジェクトを追加します。

$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

は、私は、現在および以前の状態に を取得するために、状態変化の成功を使用して、それは私が必要とするのと同じ働いています。ここで

は（私の場合にはapp.js）私は、メインモジュールの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>