UI路由器：多个独立视图

一尘不染

UI路由器：多个独立视图

angularjs

我觉得这是一个简单的用例，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彼此独立地保持有状态；改变一个不一定影响另一个。

希望我只是想念一些东西，这样我就不用费心把一个小东西放在一起，但是如果它更复杂并且人们愿意摆弄我会鞭打一些东西。

阅读 282

2020-07-04

共1个答案

一尘不染

我写了UI-路由器附加功能
- 粘稠状态来完成这个用例。

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

我写了UI-路由器附加功能
- 粘稠状态，以实现自己的目标。

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

2020-07-04