我使用的是 MEAN.js 样板，您可以在此处找到整个代码。
在从列表中选择了一篇文章后，我尝试向呈现的页面添加 2 个新选项卡。对于这个任务，我决定为 Angular.js 使用 UI-Router 和 UI-Bootstrap。2 个选项卡无法正常工作，我可以在它们之间切换并正确查看它们的内容，但偶尔当我返回并选择文章列表菜单项时，我会得到一个包含 2 个选项卡的空白页面，而没有其他任何内容。
这是对 view-article.client.view.html 文件的更改以包含 2 个新选项卡（之前的内容已复制到包含新选项卡部分内容的 2 个文件）：
<div ng-controller="ArticlesController">
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
<div ui-view></div>
</div>
我在文章控制器中插入了这几行代码：
$scope.tabs = [
{ heading: 'SubA', route:'viewArticle.SubA', active:false },
{ heading: 'SubB', route:'viewArticle.SubB', active:false }
];
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.$on('$stateChangeSuccess', function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
这是 route.js
'use strict'
angular.module('articles').config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('listArticles', {
url: '/articles',
templateUrl: 'modules/articles/views/list-articles.client.view.html'
}).
state('createArticle', {
url: '/articles/create',
templateUrl: 'modules/articles/views/create-article.client.view.html'
}).
state('viewArticle', {
url: '/articles/:articleId',
templateUrl: 'modules/articles/views/view-article.client.view.html'
}).
state('editArticle', {
url: '/articles/:articleId/edit',
templateUrl: 'modules/articles/views/edit-article.client.view.html'
}).
state('viewArticle.SubA', {
url: '/SubA',
templateUrl: 'modules/articles/views/view-article.client.view.SubA.html'
}).
state('viewArticle.SubB', {
url: '/SubB',
templateUrl: 'modules/articles/views/view-article.client.view.SubB.html'
});
}
]);