嵌套視圖

Question

我有以下路由設置爲我的應用程序：

$stateProvider 
    .state('mac', { // domain.com/mac 
     url: "/mac", 
     views: { 
      'body': { 
       templateUrl: 'partials/products/mac.body.html' 
      }, 
      'content': { 
       templateUrl: 'partials/products/mac.home.html' 
      } 
     } 
    }) 
    .state('mac.design', { // domain.com/mac/design 
     url: "/design", 
     views: { 
      'body': { 
       templateUrl: 'partials/products/mac.body.html' 
      }, 
      'content': { 
       templateUrl: 'partials/products/mac.design.html' 
      } 
     } 
    }) 
    .state('mac.features', { // domain.com/mac/features 
     url: "/features", 
     views: { 
      'body': { 
       templateUrl: 'partials/products/mac.body.html' 
      }, 
      'content': { 
       templateUrl: 'partials/products/mac.features.html' 
      } 
     } 
    }) 
    .state('iphone', { // domain.com/iphone 
     url: "/iphone", 
     views: { 
      'body': { 
       templateUrl: 'partials/products/iphone.body.html' 
      }, 
      'content': { 
       templateUrl: 'partials/products/iphone.home.html' 
      } 
     } 
    }) 
    ... 

的index.html樣子：

<div ui-view="body"></div> 

然後裏面mac.body.html：

<div ng-include="'partials/header.html'"></div> 

<div class="view-container"> 
    <div ui-view="content" class="view-frame"></div> 
</div> 

然後終於裏面mac.home.html：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h1>Mac</h1> 

     </div> 
    </div> 
</div> 

該body視圖加載罰款與頭包括，但內容不...任何想法爲什麼？

內容文件應該是容易找到，但我想我已經排除了這種可能性的問題，因爲如果我更換templateUrl與template: 'test content'也沒有出現......所以現在看來​​似乎看不到實際ui-view="content"

---

另一種方式來看待這個：

.state('home', { 
      url: "/", 
      views: { 
       'layoutFile': { 
        templateUrl: 'partials/layoutDefault.html' 
       }, 
       'contentFile': { 
        templateUrl: 'partials/home/index.html' 
       } 
      } 
     }) 

所以基本上我可以選擇哪些視圖顯示的內容。但是它是如何讓contentFile視圖被狀態看到，當它嵌套在另一個狀態中時，像這樣...

Answer 1

這是我設法得到工作：

$stateProvider 
    .state('home', { 
     abstract: true, 
     url: "/", 
     views: { 
      'body': { 
       templateUrl: 'partials/home/home.body.html' 
      } 
     }  
    }) 
    .state('home.index', { 
     url: "", 
     views: { 
      'content': { 
       templateUrl: 'partials/home/home.content.html' 
      } 
     } 
    }) 

所以基本上我建立了一個基地狀態，然後一幫孩子的狀態，將來自該頂級狀態繼承......品牌意義在實踐中使用，意味着您可以在每個ACTUAL狀態以及繼承中擁有多個視圖。

重要提示：一些需要注意的是，因爲它是抽象你不能鏈接到狀態home了，所以最好的方式做到這一點，而無需鏈接到home.index如下：

$stateProvider 
    .state('base', { 
     abstract: true, 
     url: "/", 
     views: { 
      'body': { 
       templateUrl: 'partials/home/home.body.html' 
      } 
     }  
    }) 
    .state('home', { 
     parent: 'base', 
     url: "", 
     views: { 
      'content': { 
       templateUrl: 'partials/home/home.content.html' 
      } 
     } 
    }) 

所以這意味着你可以使用home作爲你的狀態，但它將使用base作爲父項。

Answer 2

你的狀態定義表示你將擁有一個帶有主體和內容視圖的主狀態，但是從你描述您將內容視圖定義爲身體視圖的子視圖，而不是您的家庭狀態。基本上你與你的狀態減速說你會做到這一點：

index.html爲家鄉：

<div ui-view="body"></div> 
<div ui-view="content"></div> 

但是你實際上在做的是：

<div ui-view="body"> 
    <div ui-view="content"></div> 
</div> 

意思是說如果您的主要狀態是您已將內容視圖設爲正文的子視圖，而不是子視圖。

看到這個plunk。