AngularJS如何使用菜单为整个应用程序实现面包屑答案

【问题标题】：AngularJS How to implement a breadcrumbs for an entire app with menusAngularJS如何使用菜单为整个应用程序实现面包屑
【发布时间】：2020-11-09 09:08:48
【问题描述】：

angularJS 1.x 有什么好的面包屑插件详细介绍吗？

我在下面找到：

https://github.com/ncuillery/angular-breadcrumb/wiki/Getting-started

https://www.npmjs.com/package/angular-ui-router-breadcrumbs

但它没有清楚地显示如何使用它。我也想让它在我的整个应用程序中工作。

第二个，我看到here那个

该指令使用 $state 服务通过查看当前状态来生成面包屑，并遍历状态层次结构以构建面包屑数组，然后在 ng-repeat 中使用这些面包屑来生成预期的输出。

但我的情况用于整个菜单。我有一个带有 $state 名称 index.cars 的页面，另一个带有 $state 名称 index.phones 的页面，当我单击按钮将我从 cars 重定向到 phones 页面时，我想显示面包屑 cars / phones .

最好的插件是什么？

【问题讨论】：

如果你把状态看成一棵节点树（Angular-ui-router 就是这样做的），那么面包屑就是通过该树到达当前状态的路径。 index.cars 和 index.phones 不是兄弟姐妹吗？在这种情况下，您希望子菜单显示为 index 父状态模板的一部分
@Ruben Helsloot 谢谢，事实上，它们是两个不同的页面，不是兄弟，我只想将我所有的重定向路由显示为面包屑。SO，它可以显示cars > phones 所以我怀疑 Angular-ui-router 是否可以做到。
您始终可以查看$state.get() 以获取所有状态的列表并构建类似的面包屑，但在这种情况下，我认为面包屑不是最好的解决方案。前缀index. 隐含地使cars 和phones 在index 下成为兄弟状态，根据uirouter

标签： angularjs breadcrumbs

【解决方案1】：

最后我用angular-breadcrumb，参考

https://github.com/ncuillery/angular-breadcrumb/wiki/API-Reference#state-options

我使用lable 和parent 来设置页面名称及其父状态。

 $stateProvider.state('index.phones ', {
        url: '/phones ',
        ncyBreadcrumb: {
                label: 'Phones ',
                parent: function($scope) {
                    //set `$scope.parentStateName = "index.cars"` in your controller when you redirect from cars to phones
                    return $scope.parentStateName ? $scope.parentStateName : null;
                }
        },
 })

【讨论】：