Question

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

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

有没有办法通过维护状态同时使用2个视图来使用ui-router来实现这一目标？

Plunker：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': {}
  }

})

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

1 个答案: