我觉得这是ui路由器的直接用例,但也许我错过了一些东西……
我希望彼此旁边有两个独立的视图,由他们自己的菜单控制.当我在一个菜单上单击一个ui-sref链接(或$state.go)时,我想只更新其中一个视图.此外,两个视图中只有一个需要反映在URL中.
我试着定义几个状态：
$stateProvider
.state('home',{
url: '/',views: {
'viewA': {
template: "I'm number A!"
},'viewB': {
template: "It's good to be B."
}
}
})
.state('shouldOnlyChangeA',{
'url': '',views: {
'viewA': {
template: 'Check out my new shoes!'
}
}
})
.state('shouldOnlyChangeB',{
'url': '/shouldGoToNewUrl',views: {
'viewB': {
template: "This probably won't work..."
}
}
});
现在按下你最喜欢的控制器的$state.go(‘shouldOnlyChangeA’)并观察它改变了viewB的废话.我也想在这种状态下省略url定义,因为url只应该在我定义的第一个和第三个状态之间改变.
我在index.html中将每个ui视图彼此相邻：
... <div ui-view="viewA"></div> <div ui-view="viewB"></div> ...
TL; DR
我希望两个兄弟的ui-views自己是有状态的;改变一个不应该影响另一个.
希望我只是缺少一些东西,所以我没有费心去扔一个plunker或者任何东西,但是如果它更复杂并且人们愿意捣蛋我会鞭打一些东西.
看到这个类似的问题：
Independent routing for multiple regions in an AngularJS single page application
我写了UI-Router Extras – sticky states来完成这个用例.
查看demo
有关详细信息,请查看demo source code.
我写了UI-Router Extras – sticky states来实现你的目标.
您需要一个名为< div ui-view ='name'>< / div>对于每个地区.然后,将sticky：true添加到以该区域的命名视图为目标的状态定义中.
看到这个插件：http://plnkr.co/edit/nc5ebdDonDfxc1PjwEHp?p=preview
<div ui-view="viewA"></div> <div ui-view="viewB"></div>
…
$stateProvider
.state('home',{
url: '/'
})
.state('shouldOnlyChangeA',sticky: true,// Root of independent state tree marked 'sticky'
views: {
'viewA@': {
template: 'Check out my new shoes!<div ui-view></div>'
}
}
})
.state('shouldOnlyChangeA.substate',{
'url': '/substate',template: 'Lets get some shoes!'
})
.state('shouldOnlyChangeB',// Root of independent state tree marked 'sticky'
views: {
'viewB': {
template: "This probably won't work...<div ui-view></div>"
}
}
})
.state('shouldOnlyChangeB.substate',template: "Golly,it worked"
}
);
