UI 路由器子视图

Question

我正在构建一个 angularJS 应用程序。我的页面包含页眉、内容和页脚。页眉和页脚对于所有页面都是一致的。目前，我已将页眉和页脚放在 index.html 文件中，每次用户导航到局部视图时，我都使用 ui-view 更改内容。这工作正常，但我想将页眉和页脚实现为单独的视图。

这就是我目前所拥有的。我没有收到任何错误，但我没有看到从 header.html 和 footer.html.

呈现的内容

$stateProvider
    .state('main', {
        url: '/main',
        views: {
                'header': {
                    templateUrl: 'header/header.html'
                },
                'footer': {
                    templateUrl: 'footer/footer.html'
                },
         },
    })

    .state('login', {
        url: '/login',
        parent: 'main',
        views: {
            'view': {
                templateUrl: 'login/login.html',
                controller: 'loginCtrl',
                controllerAs: 'login'
            }
        }
    })

    .state('reset-password', {
        url: '/reset-password',
        parent: 'main',
        views: {
            'view': {
                templateUrl: 'views/resetPassword.html'
            }
        }
    })

我想让main的所有子状态都包含header.html和footer.html

中的内容

Answer 1

有个fully working example

还有更多详情：

Angularjs ui-router not reaching child controller

如果 index.html 看起来像这样：

<div ui-view="header"></div>
<div ui-view="view"></div>
<div ui-view="footer"></div>

我们需要对子状态使用绝对命名：

.state('login', {
    url: '/login',
    parent: 'main',
    views: {
        //'view': {
        'view@': {
            templateUrl: 'login/login.html',
            controller: 'loginCtrl',
            controllerAs: 'login'
        }
    }
})

.state('reset-password', {
    url: '/reset-password',
    parent: 'main',
    views: {
        //'view@': {
        'view@': {
            templateUrl: 'views/resetPassword.html'
        }
    }
})

实际查看 here

UI 路由器子视图

UI router child views

angularjs

angular-ui

angular-ui-router

Angularjs ui-router not reaching child controller