Question

我正在使用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路线上，在那里你可以看到我已经覆盖它以使用主视图（这会扼杀范围）。

我觉得我正在以错误的方式看待这个问题，所以任何建议都会非常感激。

感谢您的时间，

-Ryan S。

Answer 1

你要么：

在顶级添加一个模板为'<ui-view/>的额外抽象状态，以及一个包含所需范围项的控制器。因此，您基本上将重要的共享范围项移动到此顶级状态而不是networks.details。然后设置networks.details.show以填充此新状态的视图，例如"@newstate"。
使用共享服务在两个状态控制器之间进行通话和维护“状态”。这可能是更清洁的解决方案。将服务（例如“NetworksDetailsShowState”）注入两个控制器，并将服务的属性代理到两个控制器的范围属性中，然后随意更改服务。

Angular.js UI-Router儿童范围

以下是我配置路线的方式：

1 个答案: