Question

我有一个页眉，页脚，侧边栏和内容的布局，应该用于某些页面。所有页面都应包含在内容部分内。

<div class="wrapper">
    <header class="main-header" ui-view="header"></header>
    <aside class="main-sidebar" ui-view="left"></aside>
    <div class="content-wrapper" ui-view></div><!-- all pages should be included here -->
    <footer class="main-footer" ui-view="footer"></footer>
    <aside class="control-sidebar control-sidebar-dark" ui-view="right"></aside>
    <div class="control-sidebar-bg"></div>
</div>

我的路线：

.state('main', {
    views: {
        'left': {
            templateUrl: 'partials/design/left.html'
        },
        'header': {
            templateUrl: 'partials/design/header.html'
        },
        'right': {
            templateUrl: 'partials/design/right.html'
        },
        'footer': {
            templateUrl: 'partials/design/footer.html'
        }
    },
    url: '/'
})
.state('info', {
    url: '/info',
    templateUrl: "partials/info.html",
})
.state('foobar', {
    url: '/foobar',
    templateUrl: "partials/foobar.html",
})

因此，信息和foobar应该是主要的儿童，但我不知道如何做到这一点。

Answer 1

而不是

.state('main.info', {
    url: '/info',
    templateUrl: "partials/info.html",
})
.state('main.foobar', {
    url: '/foobar',
    templateUrl: "partials/foobar.html",
})

这样做：

{{1}}

Answer 2

我发现ng-include

也可以

<div class="wrapper">
    <header class="main-header" ng-include src="'partials/design/header.html'"></header>
    <aside class="main-sidebar" ng-include src="'partials/design/left.html'"></aside>
    <div class="content-wrapper"><ui-view></ui-view></div><!-- all pages should be included here -->
    <footer class="main-footer"ng-include src="'partials/design/footer.html'"></footer>
    <aside class="control-sidebar control-sidebar-dark" ng-include src="'partials/design/right.html'"></aside>
    <div class="control-sidebar-bg"></div>
</div>

因此，将此模板作为父级的所有人都将显示在<ui-view></ui-view>部分。

带孩子的多视图

2 个答案: