1

我正在使用 ui-router 库（https://github.com/angular-ui/ui-router），我对嵌套视图/路由有些困惑。

这是我配置路由的方式：

$stateProvider.state( 'networks', {
  url: '/networks',
  access: accessLevels.admin,
  abstract: true,
  controller: 'NetworksCtrl',
  templateUrl: 'networks/networks.tpl.html'
} )
  .state( 'networks.list', {
    url: '',
    access: accessLevels.admin,
    template: '<h4><i class="icon-chevron-sign-left icon-large"></i> Please select a network from the left</h4>'
  } )
  .state( 'networks.detail', {
    url: '/{networkId}',
    access: accessLevels.admin,
    controller: 'NetworkDetailCtrl',
    templateUrl: 'networks/networkDetail.tpl.html'
  } )
  .state( 'networks.detail.show', {
    url: '/show/{showCode}',
    access: accessLevels.admin,
    views: {
      '@': { // Override the main view, unfortunately this will break the scope so the network info will be requested again
        controller: 'NetworkShowCtrl',
        templateUrl: 'networks/networkShowDetail.tpl.html'
      }
    }
  });

当您访问/networks时，页面左侧会显示一个网络列表（类似于此处的 ui-router 示例：http: //angular-ui.github.io/ui-router/sample/#/contacts）。单击其中一个网络名称会在页面右侧显示详细路由，其中​​包含可单击的列表shows。

但是，我感到困惑的部分是，如果我希望networks.detail.show页面实际存在于它自己的整页上并保持父级的范围network.details怎么办？我能够想出的唯一方法是在networks.detail.show路线上，您可以看到我已经覆盖它以使用主视图（这正在杀死范围）。

我觉得我看错了，所以任何建议都将不胜感激。

谢谢你的时间，

-瑞恩·S。

4

1 回答 1

1

您要么必须：

  1. 在顶层添加一个额外的抽象状态，它有一个模板'<ui-view/>和一个控制器，其中包含您需要的所有范围项。因此，您实际上是将重要的共享范围项移动到此顶级状态的一部分，而不是networks.details. 然后设置networks.details.show填充这个新状态的视图，例如"@newstate"。

  2. 使用共享服务在两个状态控制器之间进行对话和维护“状态”。这可能是更清洁的解决方案。将服务（例如“NetworksDetailsS​​howState”）注入两个控制器并将服务的属性代理到两个控制器的范围属性上，然后随意更改服务。

于 2014-01-14T14:15:01.033 回答