Question

我正在尝试创建一个网络应用，其中我有一个包含三个视图的index.html页面：标题，内容和页脚。

我希望页眉和页脚在页面之间保持一致，但同时不能成为index.html文件的一部分。

我也希望内容视图根据我去过的网址而改变。

这是我目前的解决方案

的index.html

<body>
    <header ui-view="header"></header>
    <main ui-view="content"></main>
    <footer ui-view="footer"></footer>
</body>

app.js

$stateProvider
    .state('my-app', {
        abstract: true,
        views: {
            'header': {
                templateUrl: 'partials/shared/header.html',
                controller: "UserController"
            },
            'footer': {
                templateUrl: 'partials/shared/footer.html'
            }
        }
    })
    .state('my-app.home', {
        url: "/",
        views: {
            'content': {
                templateUrl: 'partials/home.html',
                controller: 'HomeController'
            }
        }
    })

当我加载页面“/”时，它显示页眉和页脚已正确加载，我可以在页面上看到它们，但缺少主要内容。

谁能告诉我我做错了什么？

由于

Answer 1

我设法搞清楚了。

我必须让我的子状态中的视图明确地指向根状态中的视图。

要做到这一点，我必须指向内容@＆＃39;。

固定代码：

<强> app.js

$stateProvider
    .state('my-app', {
        abstract: true,
        views: {
            'header': {
                templateUrl: 'partials/shared/header.html',
                controller: "UserController"
            },
            'footer': {
                templateUrl: 'partials/shared/footer.html'
            }
        }
    })
    .state('my-app.home', {
        url: "/",
        views: {
            'content@': {
                templateUrl: 'partials/home.html',
                controller: 'HomeController'
            }
        }
    })

Answer 2

您需要my-app.home的父级：

.state('my-app.home', {
    parent: 'my-app',
    url: "/",
    views: {
        'content': {
            templateUrl: 'partials/home.html',
            controller: 'HomeController'
        }
    }
}

Answer 3

试试这个：

$stateProvider
    .state('my-app', {
        abstract: true,
        views: {
            'header': {
                templateUrl: 'partials/shared/header.html',
                controller: "UserController"
            },
            'content': {                 
               template: '<ui-view/>',
             },
            'footer': {
                templateUrl: 'partials/shared/footer.html'
            }
        }
    })
    .state('my-app.home', {
        url: "/",
        templateUrl: 'partials/home.html',
        controller: 'HomeController'
    })

Angular ui router - 在状态之间共享视图

3 个答案: