javascript - AngularJS 中的嵌套 View 不起作用

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 View 与 header include 加载得很好，但内容却没有......有什么想法吗？

内容文件应该可以找到，但我认为我已经排除了这个问题，就像我用 template: 'test content 替换 templateUrl 一样' 也没有出现...所以看起来它看不到实际的 ui-view="content"

<小时/>

另一种看待这个问题的方式:

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

所以基本上我可以选择哪些 View 显示什么。但这是如何让 contentFile View 在嵌套在另一个 View 中时被状态看到，就像这样......

Answer 1

您的状态定义表明您将拥有一个包含正文和内容 View 的主状态，但是根据您的描述，您将内容 View 定义为正文 View 的子级，而不是您的主状态。基本上你是在说你的状态减速你会这样做:

index.html 用于主状态:

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

但是你实际上在做的是:

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

这意味着您已将内容 View 设为正文的 subview ，而不是主视图的 subview 。

查看此plunk .