我是AngularJS的新手,我使用ncy-breadcrumb作为我的AngularJS项目。有一个抽象的真正的父状态和它的两个子状态。我使用这些子状态作为标签。但我无法找到一种方法来动态显示面包屑中的这些状态。我唯一能做的就是将一个子状态名称硬编码为其他状态的父级。但我需要一个解决方案来动态显示collectionsWorkPage
状态的这些子状态。
.state('collectionsLibrary', {
url: '/headquarters/collections-library/',
templateUrl: 'app/views/collectionsLibrary/base.html',
controller: 'CollectionsLibraryBaseController',
ncyBreadcrumb: {
label: 'Collections Library',
parent: 'headquarters'
},
abstract: true,
resolve: {
controller: function ($q) {
var deferred = $q.defer();
require(['controllers/collectionsLibrary/CollectionsLibraryBaseController'], function () {
deferred.resolve();
});
return deferred.promise;
}
}
})
.state('collectionsLibrary.available', {
url: 'available/',
templateUrl: 'app/views/collectionsLibrary/available.html',
controller: 'CollectionsLibraryAvailableController',
ncyBreadcrumb: {
label: 'Collections Library-Available',
parent: 'headquarters'
},
resolve: {
controller: function ($q) {
var deferred = $q.defer();
require(['controllers/collectionsLibrary/CollectionsLibraryAvailableController'], function () {
deferred.resolve();
});
return deferred.promise;
}
}
})
.state('collectionsLibrary.my', {
url: 'my/',
templateUrl: 'app/views/collectionsLibrary/my.html',
controller: 'CollectionsLibraryMyController',
ncyBreadcrumb: {
label: 'Collections Library-My',
parent: 'headquarters'
},
resolve: {
controller: function ($q) {
var deferred = $q.defer();
require(['controllers/collectionsLibrary/CollectionsLibraryMyController'], function () {
deferred.resolve();
});
return deferred.promise;
}
}
})
.state('collectionsWorkPage', {
url: '/headquarters/collections-library/:id/edit/',
templateUrl: 'app/views/collectionsWorkPage.html',
controller: 'CollectionsWorkPageController',
ncyBreadcrumb: {
label: 'Edit Collection',
parent: 'collectionsLibrary.available'
},
params: {
data: {}
},
resolve: {
controller: function ($q, $stateParams) {
var deferred = $q.defer($stateParams);
require(['controllers/CollectionsWorkPageController'], function () {
deferred.resolve();
});
return deferred.promise;
}
}
})
答案 0 :(得分:1)
app.config(['$breadcrumbProvider', configNcyBreadcrumb])
function configNcyBreadcrumb($breadcrumbProvider) {
$breadcrumbProvider.setOptions({
includeAbstract : true
});
}
答案 1 :(得分:0)
parent
属性可以是字符串,也可以是返回父名称的函数。该函数提供了当前状态控制器的范围(与标签插值相同)。
所以你可以这样做:
ncyBreadcrumb: {
label: 'Edit Collection',
parent: function($scope) {
if($scope.tab === 'MY') // Constant defined in CollectionsLibraryMyController
return 'collectionsLibrary.my';
else if($scope.tab === 'AVAILABLE') // Constant defined in CollectionsLibraryAvailableController
return 'collectionsLibrary.available';
}
}
有关详细信息,请参阅API reference