angularjs - 用户界面路由器 : Multiple Independent Views

Question

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

我想要两个相邻的独立 View ，由它们自己的菜单控制。当我单击一个菜单上的 ui-sref 链接(或 $state.go)时，我只想更新其中一个 View 。此外，只需在 url 中反射(reflect)两个 View 之一。

我尝试定义一些状态:

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

现在从您最喜欢的 Controller 中按 $state.go('shouldOnlyChangeA') 并观察它如何改变 viewB 中的垃圾。我还想省略此状态下的 url 定义，因为 url 应该只在我定义的第一个和第三个状态之间变化。

我在index.html 中将每个ui-view 放在一起:

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

TL;DR

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

希望我只是错过了一些东西，所以我没有费心去扔 plunker一起或任何东西，但如果它更复杂并且人们愿意摆弄我会搞点东西。

Answer 1

查看类似的问题: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到针对该区域的命名 View 的状态定义。

看到这个笨蛋: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"
  }
);