Angular ui 路由器 - 在状态之间共享视图答案

【问题标题】：Angular ui router - Share views between statesAngular ui 路由器 - 在状态之间共享视图
【发布时间】：2014-11-04 11:53:50
【问题描述】：

我正在尝试创建一个 web 应用程序，其中有一个 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'
            }
        }
    })

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

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

谢谢

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

我设法弄明白了。

我必须让子状态的视图显式指向根状态的视图。

为此，我必须指向“content@”。

固定代码：

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

【讨论】：

【解决方案2】：

你需要一个 my-app.home 的父母：

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

【讨论】：

不完全。当我加载 my-app.home 状态时，页眉和页脚加载正常，只是没有显示“内容”视图。我可以在控制台中看到它正在加载文件，而不是实际将其注入 index.html。
你说得对。我没有在您的代码中显示错误。也许，尝试用 div 替换 main

【解决方案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'
    })

【讨论】：