UI-Router и Angularjs: основной контент не отображается

Question

UI-Router и Angularjs: основной контент не отображается

0

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". Кажется, что пространство создается для контента, но оно просто не показывает его.

user1883614 27 март 2016, в 06:18

Источник

Теги:

javascript

html

angularjs

css

angular-ui-router

1 ответ

Ещё вопросы

sam · Accepted Answer · 2016-03-27T01-48-00.000Z

Попробуйте это

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

Я попробовал это, все еще не работает ... Я не могу понять, в чем проблема.
Видимо, так и было - проблема была в том, что у моего заголовка есть боковая панель, которая блокирует мой основной контент ...