Question

的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”。似乎正在为内容创建空间，但它只是没有显示它。

Answer 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>

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

1 个答案: