问题描述
我使用的是 MEAN.js 样板,您可以在此处找到完整代码.
我尝试在从列表中选择一篇文章后向呈现的页面添加 2 个新选项卡.对于这个任务,我决定同时使用 UI-Router 和 UI-Bootstrap for Angular.js.2 个标签无法正常工作,我可以在它们之间切换并正确查看它们的内容,但偶尔当我返回并选择文章列表菜单项时,我会看到一个空白页面,其中包含 2 个标签,没有其他内容.
以下是对 view-article.client.view.html 文件的更改,以包含 2 个新选项卡(之前的内容已复制到包含新选项卡部分的 2 个文件中):
<标签集></tab></tabset><div ui-view></div>
我已将以下几行代码插入到文章控制器中:
$scope.tabs = [{标题:'SubA',路线:'viewArticle.SubA',活动:假},{ 标题:'SubB',路线:'viewArticle.SubB',活动:假}];$scope.go = 函数(路由){$state.go(route);};$scope.active = 函数(路由){返回 $state.is(route);};$scope.$on('$stateChangeSuccess', function() {$scope.tabs.forEach(function(tab) {tab.active = $scope.active(tab.route);});});
这里是 route.js
'使用严格'angular.module('articles').config(['$stateProvider',功能($stateProvider){$stateProvider.状态('列表文章',{网址:'/文章',templateUrl: 'modules/articles/views/list-articles.client.view.html'}).状态('创建文章',{url: '/文章/创建',templateUrl: 'modules/articles/views/create-article.client.view.html'}).状态('视图文章',{url: '/articles/:articleId',templateUrl: 'modules/articles/views/view-article.client.view.html'}).状态('编辑文章',{url: '/articles/:articleId/edit',templateUrl: 'modules/articles/views/edit-article.client.view.html'}).状态('viewArticle.SubA',{网址:'/SubA',templateUrl: 'modules/articles/views/view-article.client.view.SubA.html'}).状态('viewArticle.SubB',{网址:'/SubB',templateUrl: 'modules/articles/views/view-article.client.view.SubB.html'});}]);
这与 angular-ui bootstrap tab 指令和 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>`
并且您的演示现在可以使用了.
http://plnkr.co/edit/efnfjoQ8Hft6AZITCR67?p=preview
I'm using a MEAN.js boilerplate, you can find the entire code here.
I tried to add 2 new tabs to the page rendered after one of the articles have been selected from the list.For this task I decided to use both the UI-Router and UI-Bootstrap for Angular.js.The 2 tabs doesn't works properly, I can switch between them and correctly see their content, but occasionally when I go back and select the article list menu item, I get a blank page with the 2 tabs and nothing else.
Here is the changes to the view-article.client.view.html file to include 2 new tabs (the previous content has been copied to the 2 files containing the partial for the new tabs ):
<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>
I've inserted to the article controller these few lines of code:
$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);
});
});
Here's the 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'
});
}
]);
This has something to do with angular-ui bootstrap tab directive, and the select() callback. It appears that the select() callback in tab2 is being called when navigating away from tab2.
I changed:
`<tab ng-repeat="t in tabs" heading="{{t.heading}}" select="go(t.route)" active="t.active"> `</tab>
to:
`<tab ng-repeat="t in tabs" heading="{{t.heading}}" ui-sref="{{t.route}}" active="t.active"> </tab>`
and your demo works now.
http://plnkr.co/edit/efnfjoQ8Hft6AZITCR67?p=preview
这篇关于angularjs 中的选项卡无法与 UI-Router 和 UI-bootstrap 一起正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!