如何在AngularJS中設置嵌套視圖？

我有一個應用程序與各種屏幕。每個屏幕都分配有一個URL，例如#,mails,contacts等。如何在AngularJS中設置嵌套視圖？

在我的主HTML文件中，我有一個ng-view元素，它根據用戶選擇的路線進行更新。到現在爲止還挺好。

現在其中一些屏幕有一個子導航。例如，#mails確實具有收件箱和發送的文件夾。他們將自己介紹爲兩列：左側的子導航欄，右側的適當文件夾的郵件。

當您導航到#mails，應當重定向到#mails/inbox，使基本收件箱是默認子視圖的郵件。

我該如何設置？

我現在能想到的唯一方法是（我對AngularJS很新穎，因此原諒我，如果這個問題有點天真的話）是有兩個視圖，一個用於#mails/inbox，另一個用於#mails/sent。

當您選擇路線時，會加載這些視圖。當您選擇#mails時，它只會將您重定向到#mails/inbox。

但這意味着這兩個視圖都必須使用ng-include作爲子導航。不知何故，這對我來說感覺不對。

我想要的更多的是嵌套視圖：頂部的一個在諸如郵件，聯繫人之類的屏幕之間切換，而底部的一個在子視圖之間切換，例如收件箱，發送等等。

我該如何解決這個問題？

來源

2013-03-17 Golo Roden

據我所知，目前還沒有替代使用NG-包括截至目前。這可能在未來發生變化。 – finishingmove 2013-03-17 11:36:15

看看[AngularJS - 複雜的部分和模板嵌套]（http://stackoverflow.com/questions/12863663/angularjs-complex-nesting-of-partials-and-templates），並簽出[Angular ui-route ]（https://github.com/angular-ui/ui-router）。 – Stewie 2013-03-17 14:25:22

是的，@Stewie是對的。 'ng-swith'現在是正確的方法 – 2013-03-17 16:07:18

AngularJS ui-router解決了我的問題:-)

來源

2013-03-19 08:59:18

雙方同意。之前我只能處理基本上單一的路線，但是ui-router允許你通過最少的工作/請求「隧道」到你想要的地方。 – 2013-10-14 22:42:24

另一個庫檢查：http://angular-route-segment.com

你可以用它代替內置ng-view和$route。

樣品航線的配置看起來像這樣的：

$routeSegmentProvider. 

when('/section1',   's1.home'). 
when('/section1/prefs', 's1.prefs'). 
when('/section1/:id',  's1.itemInfo.overview'). 
when('/section1/:id/edit', 's1.itemInfo.edit'). 
when('/section2',   's2'). 

segment('s1', { 
    templateUrl: 'templates/section1.html', 
    controller: MainCtrl}). 

within(). 

    segment('home', { 
     templateUrl: 'templates/section1/home.html'}). 

    segment('itemInfo', { 
     templateUrl: 'templates/section1/item.html', 
     controller: Section1ItemCtrl, 
     dependencies: ['id']}). 

    within(). 

     segment('overview', { 
      templateUrl: 'templates/section1/item/overview.html'}). 

     segment('edit', { 
      templateUrl: 'templates/section1/item/edit.html'}). 

     up(). 

    segment('prefs', { 
     templateUrl: 'templates/section1/prefs.html'}). 

    up(). 

segment('s2', { 
    templateUrl: 'templates/section2.html', 
    controller: MainCtrl});

來源

2013-08-15 10:01:45 artch

如何在AngularJS中設置嵌套視圖？

回答

相關問題