Angular.js UI-Router子級作用域

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路由上，在那里您可以看到我已經覆蓋了它以使用主視圖（這將殺死作用域）。

我覺得我在用錯誤的方式看待，因此任何建議都將不勝感激。

謝謝你的時間，

瑞恩·S

Answer 1

您要么必須：

1. 在頂層添加一個附加的抽象狀態，該狀態具有模板'<ui-view/>以及一個具有所需所有作用域項目的控制器。 因此，從本質上講，您將把重要的共享范圍項移動到此頂級狀態的一部分，而不是networks.details 。 然后設置networks.details.show來填充這個新國家的觀點，如"@newstate" 。

2. 使用共享服務在兩個狀態控制器之間進行對話並維護“狀態”。 這可能是更清潔的解決方案。 將服務（例如“ NetworksDetailsS​​howState”）注入兩個控制器中，並將服務的屬性代理到兩個控制器中的作用域屬性中，然后隨意更改服務。