UI 路由器:多个独立视图 [英] UI Router: Multiple Independent Views

问题描述

我觉得这是 ui-router 的直接用例，但也许我遗漏了一些东西......

我想要两个独立的视图，并由它们自己的菜单控制.当我单击一个菜单上的 ui-sref 链接(或 $state.go 就此而言)时，我只想更新其中一个视图.另外，url中只需要反映两种视图中的一种.

我尝试过定义几个状态:

$stateProvider.state('家', {网址:'/'，意见:{'视图A':{模板:我是A号！"},'视图B':{模板:做B真好."}}}).state('shouldOnlyChangeA', {'网址':''，意见:{'视图A':{模板:看看我的新鞋！"}}}).state('shouldOnlyChangeB', {'url': '/shouldGoToNewUrl',意见:{'视图B':{模板:这可能行不通……"}}});

现在从你最喜欢的控制器中按下 $state.go('shouldOnlyChangeA') 并观察它改变 viewB 的废话.我还想在这种状态下省略 url 定义，因为 url 应该只在我定义的第一个和第三个状态之间改变.

我让每个 ui-view 在 index.html 中彼此相邻:

<代码>...<div ui-view="viewA"></div><div ui-view="viewB"></div>...

TL;DR

我希望两个兄弟 ui-view 独立地有状态；改变一个不一定会影响另一个.

希望我只是错过了一些东西，所以我没有费心把 plunker 放在一起或任何东西，但如果它更复杂，人们愿意摆弄我会做出一些事情.

解决方案

看到这个类似的问题:AngularJS 单页中多个区域的独立路由申请

<小时>

我写了UI-Router Extras - 粘性状态 来完成这个用例.

查看演示查看演示源代码了解详情.

我写了UI-Router Extras - 粘性状态 以实现您的目标.

您需要为每个区域指定一个名为

.然后，将 sticky: true 添加到以该区域的命名视图为目标的状态定义中.

看到这个 plunk:http://plnkr.co/edit/nc5ebdDonDfxc1PjwEHp?p=preview

<div ui-view="viewA"></div><div ui-view="viewB"></div>

...

$stateProvider.state('家', {网址:'/'}).state('shouldOnlyChangeA', {'网址':''，sticky: true,//标记为sticky"的独立状态树的根意见:{'视图A@':{模板:'看看我的新鞋！<div ui-view></div>'}}}).state('shouldOnlyChangeA.substate', {'url': '/子状态',模板:让我们买些鞋子吧！"}).state('shouldOnlyChangeB', {'url': '/shouldGoToNewUrl',sticky: true,//标记为sticky"的独立状态树的根意见:{'视图B':{模板:这可能行不通...
"}}}).state('shouldOnlyChangeB.substate', {'url': '/子状态',模板:天哪，它奏效了"});

I feel like this is a straight forward use case for the ui-router but maybe I'm missing something...

I want to have two separate views next to each other controlled by their own menus. When I click a ui-sref link on one menu (or $state.go for that matter), I would like to update only one of the views. Additionally, only one of the two views needs to be reflected in the url.

I tried defining a few states:

$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..."
     }
  }
});

Now press $state.go('shouldOnlyChangeA') from your favorite controller and watch it change the crap out of viewB. I'd also like to omit the url definition in this state since the url should only change between the first and third states I've defined.

I have each ui-view sitting next to each other in index.html:

...
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
...

TL;DR

I want two sibling ui-views to be stateful all on their own; changing one shouldn't necessarily effect the other.

Hopefully I'm just missing something so I didn't bother to throw a plunker together or anything, but if it's more complicated and folks are willing to fiddle I'll whip something up.

解决方案

See this similar question: Independent routing for multiple regions in an AngularJS single page application

---

I wrote UI-Router Extras - sticky states to accomplish this use case.

View the demo Check out the demo source code for details.

I wrote UI-Router Extras - sticky states to achieve your goal.

You'll want one named <div ui-view='name'></div> for each region. Then, add sticky: true to the state definition which targets that region's named view.

See this plunk: http://plnkr.co/edit/nc5ebdDonDfxc1PjwEHp?p=preview

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

...

$stateProvider
.state('home', {
  url: '/'
 })
.state('shouldOnlyChangeA', {
  'url': '',
  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', {
  'url': '/shouldGoToNewUrl',
  sticky: true,  // Root of independent state tree marked 'sticky'
  views: {
    'viewB': {
       template: "This probably won't work...<div ui-view></div>"
     }
  }
})
.state('shouldOnlyChangeB.substate', {
  'url': '/substate',
  template: "Golly, it worked"
  }
);

这篇关于UI 路由器:多个独立视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！