如何实现包含home状态作为默认状态然后是先前状态和当前状态的breadcrumb？

Question

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

  

主页/创建用户/登录

表示Home是默认状态，create user是先前访问过的页面，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）：

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

<强> HTML

str()