UI-Router 和 Angularjs：主要内容未显示答案

【问题标题】：UI-Router and Angularjs: main content isn't being displayedUI-Router 和 Angularjs：主要内容未显示
【发布时间】：2016-07-14 14:31:36
【问题描述】：

index.html:

<body>
    <div ui-view="header"></div>
    <div ui-view></div>
    <div ui-view="footer"></div>
    <div id="footer" class="container" />
</body>

app.js：

.state('root', {
    url: '',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
        },
        'footer': {
            templateUrl: 'views/footer.html'
        }
    },
    data: {
        requiresLogin: true
    }
}).state('root.home', {
    url: '/',
    views: {
        '@': {
            templateUrl: 'views/home.html',
            controller: 'HomeCtrl'
        }
    },
    data: {
        requiresLogin: true
    }
})

所以我有一个页眉和页脚，它们被正确调用并显示在屏幕上，但由于某种原因，我的 home.html 没有显示。目前，home.html 仅包含一个 h1 标题“Home”。似乎正在为内容创建空间，但只是没有显示它。

【问题讨论】：

标签： javascript html css angularjs angular-ui-router

【解决方案1】：

请试试这个

.state('root', {
    url: '',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
        },
        'main': {
            template: '<div>This is default main content placeholder</div>'
         },
        'footer': {
            templateUrl: 'views/footer.html'
        }
    },
    data: {
        requiresLogin: true
    }
}).state('root.home', {
    url: '/',
    views: {
        'main@': {
            templateUrl: 'views/home.html',
            controller: 'HomeCtrl'
        }
    },
    data: {
        requiresLogin: true
    }
})

在 index.html 中：

<body>
    <div ui-view="header"></div>
    <div ui-view="main"></div>
    <div ui-view="footer"></div>
    <div id="footer" class="container" />
</body>

【讨论】：

我试过了，还是不行……我不知道是什么问题。
显然是这样 - 问题是我的标题有一个侧边栏，它挡住了我的主要内容......