Angularjs UI路由器子视图

我正在构建一个angularJS应用程序。我的页面包含页眉、内容和页脚。所有页面的页眉和页脚都是一致的。目前，我已将页眉和页脚放在

index.html

文件中，每次用户导航到局部视图时，我都使用

ui视图

来更改内容。这很好，但是我想将页眉和页脚实现为单独的视图

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

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

中的内容

详情如下:

在这种情况下，

index.html

如下所示：

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

---

行动起来检查它

你也能发布你的HTML吗？也许问题在于你能发布index.html内容吗？这可能很有用：

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