UI路由器:多个独立视图

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自己都是有状态的; 改变一个不一定会影响另一个.

希望我只是错过了一些东西,所以我不打算把一个笨蛋扔在一起或任何东西,但如果它更复杂,人们愿意捣蛋我会鞭打一些东西.

Answer 1

请参阅此类似问题:AngularJS单页面应用程序中多个区域的独立路由

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

查看演示 查看演示源代码以获取详细信息.

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

您需要<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"
  }
);