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'
                }
            }
        })

所以基本上我可以选择哪些视图显示什么。但是，如果将内容文件视图嵌入到另一个内部时，如何将内容文件视图看到......

Answer 1

您的州定义表示您将拥有包含正文和内容视图的家庭状态，但是根据您的描述，您将内容视图定义为正文视图的子视图，而不是您的家庭状态。基本上你说你的州减速你会这样做：

家乡的

index.html：

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

然而，你实际在做的是：

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

意味着您已将内容视图设为正文的子视图，而不是主视图状态的子视图。

请参阅此plunk。

Answer 2

这是我设法开始工作的原因：

$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作为父级。

AngularJS中的嵌套视图无法正常工作

2 个答案: