javascript - Angular.js UI-Router 子范围

Question

我正在使用 ui-router 库 ( https://github.com/angular-ui/ui-router )，并且我对嵌套 View /路线有点困惑。

这是我配置路由的方式:

$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 )。单击其中一个网络名称会在页面右侧显示详细路线，其中包含可单击的显示列表。

但是，我感到困惑的部分是，如果我希望 networks.detail.show 页面实际存在于它自己的整页上并保持父 的范围，该怎么办网络.详细信息？我能够想出解决这个问题的唯一方法是在 networks.detail.show 路线上，您可以在其中看到我已经覆盖它以使用主视图(这正在杀死范围) )。

我觉得我看待这个问题的方式是错误的，所以任何建议将不胜感激。

感谢您的宝贵时间，

-瑞安·S.

Answer 1

您必须:

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

2. 使用共享服务在两个状态 Controller 之间进行通信并维护“状态”。这可能是更清洁的解决方案。将服务(例如“NetworksDetailsS​​howState”)注入(inject)两个 Controller 中，并将服务的属性代理到两个 Controller 中的范围属性上，然后随意更改服务。