使用 UI-Router 具有不同 URL 的多个状态

Question

我正在尝试为我的设计师开发一个 UI，但是运行在尝试让 UI-Router 和 Angular 工作时遇到了一些问题以这种方式正确。在主页上我有 2 个部分，用户和组。主页的 URL 为 /home，我希望能够 select 一个用户或一个组，并将 URL 更改为 /home/user/:id 或/home/group/:id 分别。问题是我希望嵌套视图直接出现在相应部分的下方。因此，如果他们 select 一个用户，它将在用户部分下方打开用户视图，反之亦然。

我以为可以用<div ui-view="users"></div>和<div ui-view="groups"></div>这样的多视图来实现，但是用的时候没有状态感。无论URL（状态）如何，视图都会自动呈现。

有没有一种方法可以使用 ui-router 通过在使用 2 个视图的同时保持状态来实现这一点？

笨蛋：http://plnkr.co/edit/vfz1l4GAdBdhkyC6zMgQ?p=preview

Answer 1

您可以创建抽象状态来创建布局，然后将该状态作为父状态引用到其他状态。

这是一个plunker

  $stateProvider.state('home', {
abstract: true,
views: {
  '@': {
    templateUrl: 'home.html',
  },
  'user@home': {},
  'group@home': {
    templateUrl: 'group.html'
  }
}
}).state('root', {
  parent: 'home',
  url: '/',
  views: { . . }

}).state('home.user', {
  parent: 'home',
  url: '/user',
  views: {
    'user@home': {
      controller: 'UserController',
      templateUrl: 'user.html'
    },
    'group@home': {}
  }

})

使用 UI-Router 具有不同 URL 的多个状态

Using UI-Router multiple states with different URLs

angularjs

angular-ui-router