AngularJS如何为每个页面动态添加有角度的面包屑

Question

我正在使用angular breadcrumb为我的angularjs项目添加面包屑。当我在每个页面的模块state中添加以下代码时，它工作得很好，当我单击菜单时，它将重定向并显示正确的面包屑。

$stateProvider.state({
name: 'index.cars',
code: "cars",
url: '/cars',
templateUrl: 'partials/cars/index.html',
controller: 'carsCtrl',
ncyBreadcrumb: {
label: 'CARS'
},
}

现在，我发现项目菜单是可配置的，这意味着所有菜单的名称都是可配置，我可以从api中获得所有菜单。

[
{
"menuName": "CARS",
"operation":""#/index/cars"
},
{

"menuName": "PHONES",
"operation":""#/index/phones"
},
]

现在，我很困惑，将我的面包屑lable设置为接口全局返回的数据的最佳解决方案是什么？

我可以单独过滤每个控制器中的api数据，并像一样分配数据

$stateProvider.state('index.cars', {
url: '/cars',
templateUrl: 'partials/cars/index.html',
controller: function($scope) {
//get menu name of car page from api
$scope.foo='menuName';
},
ncyBreadcrumb: {
label: 'State {{foo}}'
}
})

但我想找到一个更好的方法，不需要更换每个控制器。

Answer 1

与ui路由器一起使用的AngularJS breadcrumbs指令的示例

breacrumb.js

var breadcrumbs = function($state, $stateParams) {
return {
restrict: 'E',
templateUrl: '/path/to/breadcrumbs.html',
replace: true,
compile: function(tElement, tAttrs) {
return function($scope, $elem, $attr) {
$scope.show = function(state){
if(!angular.isDefined(state.data)){
return false;
}
else if(!angular.isDefined(state.data.breadcrumbs)){
return false;
}
return true;
};
}
}
};
};
app.directive('breadcrumbs', ['$state', '$stateParams', breadcrumbs]);

breadcrumbs.html

<ul class="breadcrumbs">
<li data-ng-repeat="state in $state.$current.path | filter:show" data-ng-class="{ 'current': $last }">
<a data-ng-if="!$last" class="breadcrumb" href="{{ state.url.format($stateParams) }}">{{ state.data.title }}</a>
<span data-ng-if="$last" class="breadcrumb">{{ state.data.title }}</span>
</li>
</ul>

示例-state.js

var config = function ($stateProvider) {
$stateProvider
// Ignored
.state('index', {
url: "/",
abstract: true
/***/
})
.state('index.overview', {
url: '', // Inherit
views: {
/***/
},
data : {
title : 'Overview',
breadcrumbs : true
}
})
.state('index.overview.children', {
url: '/overview/:id',
views: {
/***/
},
data : {
title : 'Children',
breadcrumbs : true
}
});
};
angular.module('app', [/***/]).config(['$stateProvider', '$urlRouterProvider', config]);

index.html

<!-- used with gridism : https://github.com/cobyism/gridism -->
<div class="grid">
<div class="unit whole">
<div class="block-content">
<breadcrumbs></breadcrumbs>
<!-- /End .breadcrumbs -->
</div><!-- /End .block-content -->
</div>
</div>
<!-- /End .grid -->

style.css

.breadcrumbs {
border: 1px solid #e0e0e0;
background-color: #FFFFFF;
line-height: 1.5em;
overflow: hidden;
}
.breadcrumbs > li {
background-color: #f6f6f6;
float: left;
list-style: none outside none;
padding: 0.35em 1.5em 0.35em 1em;
}
.breadcrumbs li:first-child > .breadcrumb:before,
.breadcrumbs li:first-child > .breadcrumb:after {
display: none;
}
.breadcrumbs .breadcrumb {
color: #a2a2a2;
font-size: 0.75em;
font-weight: bold;
position: relative;
}
.breadcrumbs .breadcrumb:hover {
color: #555555;
}
.breadcrumbs .breadcrumb:before,
.breadcrumbs .breadcrumb:after {
border-color: transparent transparent transparent #e0e0e0;
border-image: none;
border-style: outset outset outset solid;
border-width: 25px;
content: "";
height: 0;
left: -40px;
pointer-events: none;
position: absolute;
top: -1.5em;
width: 0;
}
.breadcrumbs .breadcrumb:after {
border-left-color: #f6f6f6;
}
.breadcrumbs .breadcrumb:before {
left: -38px;
}
.breadcrumbs .current {
background-color: #FFFFFF;
margin-left: -15px;
}
.breadcrumbs .current .breadcrumb {
color: #555555;
left: 20px;
overflow: hidden;
}