Question

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

我希望两个单独的视图彼此相邻，由他们自己的菜单控制。当我点击一个菜单上的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只应在我定义的第一个和第三个状态之间发生变化。

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

...
<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添加到以该区域的命名视图为目标的状态定义。

请参阅此插件：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路由器：多个独立视图

TL; DR

1 个答案: