
本文介绍了Angular ui-bootstrap 选项卡不呈现 ui-view的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在将现有的 angular 应用程序升级到所有最新版本的 angular (v1.2.13)、ui-router (v0.2.8) 和 ui-bootstrap (v0.10.0).
我的嵌套视图具有多个命名视图.其中一个命名视图内部有选项卡.我曾经能够在每个选项卡中设置 ui-views
,但这不再有效.如果我不使用选项卡,则命名视图会正确呈现.
我创建了一个 plunkr 来展示我所看到的.
这是我的状态配置._split.html
有 3 个命名视图:TOP
、MIDDLE
和 BOTTOM
.TOP
和 MIDDLE
都有命名视图 LEFT
和 RIGHT
.TOP
有标签并且不呈现视图 LEFT
或 RIGHT
.MIDDLE
具有相同的命名视图并且它们正确呈现.
$stateProvider.state("foo", {摘要:真实,网址:/foo",templateUrl: '_split.html',}).state("foo.view", {摘要:真实,网址:'',意见:{'最佳': {模板:'_tabs.html'},'中间': {templateUrl: '_tabs2.html'},'底部': {模板:'<h2>底部</h2>'}},}).state("foo.view.tabs", {网址:'',意见:{'剩下': {模板:'<h3>左</h3>'},'对': {模板:'<h3>右</h3>'}}})
有没有办法在标签中呈现 ui-view?
解决方案
是的,您可以在选项卡中呈现 ui 视图.诀窍是在
中使用 ui-sref
来控制状态/路由变化,并拥有 ui-view
在
下方.我确定还有其他方法,但这就是我让标签与 ui-router 一起工作的方式.
编辑更新
以上原建议是错误的,ui-sref
应该在
提示 chris-t 以获得正确的配置.
工作多视图演示 http://plnkr.co/edit/gXnFS3?p=preview
index.html
<tab ui-sref="left"><tab-heading style="cursor:pointer;"><a ui-sref-active="active">左</a></tab-heading></tab><tab ui-sref="right"><tab-heading style="cursor:pointer;"><a ui-sref-active="active">Right</a></tab-heading></tab></tabset><div class="row"><br><div class="col-xs-4"><div class="well" ui-view="viewA"><!--这里是A内容-->
<div class="col-xs-4"><div class="well" ui-view="viewB"><!--这里是B内容-->
app.js (ui-router 配置)
$stateProvider.state('左', {网址:/",意见:{视图A":{模板:左标签,index.viewA"},视图B":{模板:'左标签,index.viewB<br><a ui-sref=".list">显示列表</a>'+'<div ui-view="viewB.list"></div>'},视图C":{模板:'左标签,index.viewC
I am upgrading an existing angular app to all the latest versions of angular (v1.2.13), ui-router (v0.2.8), and ui-bootstrap (v0.10.0).
I have nested views that have multiple named views. One of the named views has tabs inside of it. I used to be able to set ui-views
within each tab, but that no longer is working. If I don't use the tabs then the named views render correctly.
I have created a plunkr to show what I'm seeing.
Here is my state configuraiton. _split.html
has 3 named views: TOP
, MIDDLE
, and BOTTOM
. TOP
and MIDDLE
both have named views LEFT
and RIGHT
. TOP
has tabs and does not render the views LEFT
or RIGHT
. MIDDLE
has the same named views and they render correctly.
$stateProvider
.state("foo", {
abstract: true,
url: "/foo",
templateUrl: '_split.html',
})
.state("foo.view", {
abstract: true,
url: '',
views: {
'TOP': {
template: '_tabs.html'
},
'MIDDLE': {
templateUrl: '_tabs2.html'
},
'BOTTOM': {
template: '<h2>Bottom</h2>'
}
},
})
.state("foo.view.tabs", {
url: '',
views: {
'LEFT': {
template: '<h3>Left</h3>'
},
'RIGHT': {
template: '<h3>Right</h3>'
}
}
})
Is there any way to render ui-view within tabs?
解决方案
Yeah, you can render ui-views within tabs. The trick is to use ui-sref
in <tab-heading>
to control the state/route change, and have the ui-view
below the </tabset>
. I'm sure there are other ways, but thats how I got tabs working with ui-router.
Above original suggestion is wrong, ui-sref
should be in <tab>
Hat tip to chris-t for correct config.
Working multiple views demo http://plnkr.co/edit/gXnFS3?p=preview
index.html
<tabset>
<tab ui-sref="left">
<tab-heading style="cursor:pointer;">
<a ui-sref-active="active">Left</a>
</tab-heading>
</tab>
<tab ui-sref="right">
<tab-heading style="cursor:pointer;">
<a ui-sref-active="active">Right</a>
</tab-heading>
</tab>
</tabset>
<div class="row">
<br>
<div class="col-xs-4">
<div class="well" ui-view="viewA">
<!--Here is the A content-->
</div>
</div>
<div class="col-xs-4">
<div class="well" ui-view="viewB">
<!--Here is the B content-->
</div>
</div>
</div>
app.js (ui-router config)
$stateProvider
.state('left', {
url: "/",
views: {
"viewA": {
template: "Left Tab, index.viewA"
},
"viewB": {
template: 'Left Tab, index.viewB<br><a ui-sref=".list">Show List</a>' +
'<div ui-view="viewB.list"></div>'
},
"viewC": {
template: 'Left Tab, index.viewC <div ui-view="viewC.list"></div>'
}
}
})
.state('left.list', {
url: 'list',
views: {
"viewB.list": {
template: '<h2>Nest list viewB</h2><ul>' +
'<li ng-repeat="thing in tab1things">{{thing}}</li></ul>',
controller: 'Tab1ViewBCtrl',
data: {}
},
"viewC.list": {
template: 'Left Tab, list.viewC'
}
}
})
这篇关于Angular ui-bootstrap 选项卡不呈现 ui-view的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!