AngularJS中的嵌套视图不起作用

Nested Views in AngularJS not working

本文关键字：视图 不起作用 嵌套 AngularJS      更新时间：2023-09-26

我为我的应用程序设置了以下路由：

$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视图加载良好，包含标头，但内容不。。。有什么想法吗？

内容文件应该是可查找的，但我认为我已经排除了这一问题，就好像我用同样没有出现的template: 'test content'替换templateUrl一样。。。所以它似乎看不到真正的ui-view="content"

另一种方法：

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

所以基本上我可以选择哪些视图显示什么。但是，当contentFile视图嵌套在另一个类似于…的视图中时，它是如何让状态看到的

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

归属状态的index.html：

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

然而，你实际做的是：

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

这意味着您已经将内容视图作为主体的子视图，而不是主状态下的子视图。

看到这个砰的一声。

这就是我设法做到的：

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

相关文章：