如何使用angular-ui/ui-router動態填充子視圖？

Question

我正在學習如何使用angular-ui/ui-router。到目前爲止，我已經設置了以下內容：

var home = { 
    name: 'home', 
    url: '/home', 
    views: { 
     'nav-sub': { 
      templateUrl: '/Content/app/home/partials/nav-sub.html', 
     } 
    } 
}; 
var homeOverview = { 
    name: 'home.overview', 
    parent: 'home', 
    url: '/overview', 
    views: { 
     'grid@': { 
      templateUrl: '/Content/app/home/partials/overview.html', 
      controller: 'HomeOverviewController', 
     } 
    } 
} 

這可以工作並顯示填充我的屏幕的概述頁面。

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
x               x 
x               x 
x               x 
x               x 
x               x 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 

現在我想要做的就是有這個頁面 從基於URL的第三部分，一個數據庫中獲取內容的動態分配的區域。這樣 在我的概覽頁面，其中的/ home /概述的URL的鏈接/ 1234將 得到一個頁面，顯示：

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
x         x      x 
x Page Links      x      x 
x         x      x 
x 1234        x      x 
x 12        x Page 1234   x 
x         x      x 
x         x      x 
x         x      x 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 

有人建議我怎麼能做到這一點？我只是尋找 一些高層次的建議，並希望得到任何幫助。

Answer 1

您可以創建一個子狀態

var homeOverview = { 
    name: 'home.overview', 
    parent: 'home', 
    url: '/overview', 
    views: { 
     'grid@': { 
      templateUrl: '/Content/app/home/partials/overview.html', 
      controller: 'HomeOverviewController', 
     } 
    } 
} 

這樣

var homeOverViewItem={ 
    name: 'home.overview.item', 
    parent: 'home.overview', 
    url: '/:id', 
    views: { 
     'grid@': { 
      templateUrl: '/Content/app/home/partials/overviewItem.html', 
      controller: 'HomeOverviewItemController', 
     } 
    } 
} 

在你將定義ui-view標籤，它會得到overviewItem.html插入HTML模板一些地方的主視圖overview.html。在這裏看到一些樣品https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views