angularjs – UI路由器：多个独立视图

发布时间：2020-12-17 07:58:52 所属栏目：安全来源：网络整理

导读：我觉得这是ui路由器的直接用例,但也许我错过了一些东西…… 我希望彼此旁边有两个独立的视图,由他们自己的菜单控制.当我在一个菜单上单击一个ui-sref链接(或$state.go)时,我想只更新其中一个视图.此外,两个视图中只有一个需要反映在URL中. 我试着定义几个状

我觉得这是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"
  }
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!