嵌套视图

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。