角UI的路由器：使用兒童父母的看法

Question

以故事的形式：

什麼我找在這裏是一個主詳細的設置。主人是列表形式，當我點擊一個鏈接（相對於特定的行/記錄（或在這種情況下的帳戶）），我想看到主視圖中的細節（字面上，「主」視圖：<div class="container" ui-view="main"></div>） 。

我要做到這一點，保持我的URL結構（/accounts的賬戶清單; /accounts/:id的詳細版本），但我想詳細視圖中使用該列表使用的看法。

我現在有

的index.html

... 
<div class="container" ui-view="main"></div> 
... 

accounts.js

$stateProvider 
    .state ('accounts', { 
     url: '/accounts', 
     views: { 
      'main': { 
       controller: 'AccountsCtrl', 
       templateUrl: 'accounts/accounts.tpl.html' 
      } 
     }, 
     data: { pageTitle: 'Account' } 
    }) 
    .state ('accounts.detail', { 
     url: '/:id', 
     views: { 
      'main': { 
       controller: 'AccountDetailCtrl', 
       templateUrl: 'accounts/detail.tpl.html' 
      } 
     }, 
     data: { pageTitle: 'Account Detail' } 
    }); 

在這一點上，/accounts路線按預期工作。它在main視圖中正確顯示accounts/accounts.tpl.html。在該html中繼器中的每一行將其鏈接到其合適的/accounts/:id URL，我正在處理嵌套狀態accounts.detail。

什麼可能是明顯多數的你，誰知道比我更瞭解這一點，我accounts.detail將呈現給視圖main如果在模板accounts/accounts.tpl.html存在命名視圖。確實如此。

但這不是我想要的。我想accounts.detail東西呈現在父main視圖;我希望將accounts/detail.tpl.html的html替換爲，替換的accounts/accounts.tpl.html的html，找到index.html: <div class="container" ui-view="main"></div>。

那麼我怎麼能做到這一點？

我的解決方案在上下文中 的訣竅是，作爲回答說，成立URL方案，以確定哪個子狀態「默認」。我用純英語解釋此代碼的方式是，父類是抽象的，具有適當的URL，「默認」子類具有「相同」URL（由''指示）。

如果您需要進一步澄清，只需發表評論，我會分享任何更多的指導。

.config(function config($stateProvider) { $stateProvider 
    .state ('accounts', { 
     abstract: true, 
     url: '/accounts', 
     views: { 
      'main': { 
       templateUrl: 'accounts/accounts.tpl.html', 
       controller: 'AccountsCtrl' 
      } 
     }, 
     data: { pageTitle: 'Accounts' } 
    }) 
    .state ('accounts.list', { 
     url: '', 
     views: { 
      'main': { 
       templateUrl: 'accounts/list.tpl.html', 
       controller: 'AccountsListCtrl' 
      } 
     }, 
     data: { pageTitle: 'Accounts List' } 
    }) 
    .state ('accounts.detail', { 
     url: '/:id', 
     views: { 
      'main': { 
       templateUrl: 'accounts/detail.tpl.html', 
       controller: 'AccountDetailCtrl' 
      } 
     }, 
     data: { pageTitle: 'Account Detail' } 
    }); 

Answer 1

聽起來像你，根本不希望視圖是分層的。爲此，只需將第二個狀態的名稱更改爲detail即可。

但請注意，這樣做會損失狀態樹的任何分層屬性（例如帳戶的控制器代碼狀態）。

如果你想保持控制器的層次結構，但執行html的替換，我會創建另一個父上面兩個其他照顧控制器邏輯，但只有一個非常簡單的視圖<div ui-view=""></div>。

例如：

$stateProvider 
    .state('app', { url: '', abstract: true, template: 'parent.html', controller: 'ParentCtrl' }) 
    .state('app.accounts', { url: '/accounts', templateUrl: 'accounts.tpl.html', controller: 'AccountsCtrl' }) 
    .state('app.detail', { url: '/accounts/:id', templateUrl: 'detail.tpl.html', controller: 'AccountDetailCtrl' }); 

Answer 2

你可以用「@」來定義您所選擇的用戶界面視圖的絕對路徑。例如：「detail @ contacts」：{}，其中這絕對針對'聯繫'狀態中的'詳細'視圖。 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views