AngularJS中的标签无法使用UI-Router和UI-Bootstrap正常工作
-
21-12-2019 - |
题
我正在使用均值.js batherplate,您可以找到整个代码这里。
我试图在从列表中选择一个文章后向呈现的页面添加2个新选项卡。 对于此任务,我决定使用UI-Router和UI-Bootstrap for Angular.js。 2个选项卡无法正常工作,我可以在它们之间切换并正确地查看他们的内容,但偶尔在我返回并选择文章列表菜单项时,我会收到一个带有2个标签的空白页,没有其他选项卡。
以下是View-Stical.Wlient.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'
});
}
]);
. 解决方案
这与Angular-UI Bootstrap选项卡指令以及Select()回调有关。似乎在从Tab2导航时正在调用Tab2中的Select()回调。
我改变了:
`<tab ng-repeat="t in tabs" heading="{{t.heading}}" select="go(t.route)" active="t.active"> `</tab>
.
到:
`<tab ng-repeat="t in tabs" heading="{{t.heading}}" ui-sref="{{t.route}}" active="t.active"> </tab>`
.
和你的演示现在工作。
其他提示
我的问题与 ui-bootstrap v0.11.2 ,我更改为 v0.12.0 并运作!
不隶属于 StackOverflow