Как правильно отображать верхний / нижний колонтитулы с помощью angularjs и ui-router?

0

Это мой index.html:

<body>
    <div ui-view></div>
</body>

Это мой app.js:

angular.module('sample', [
            'auth0',
            'ngRoute',
            'sample.home',
            'sample.header',
            'sample.login',
            'ui.router',
            'angular-storage',
            'angular-jwt'
        ])
        .config(function myAppConfig($stateProvider, $urlRouterProvider, $routeProvider, authProvider, $httpProvider, $locationProvider,
            jwtInterceptorProvider) {

            $stateProvider
                .state('login', {
                    url: '/login',
                    templateUrl: 'login/login.html',
                    controller: 'LoginCtrl'
                }).state('root', {
                    url: '/',
                    abstract: true,
                    views: {
                        'header': {
                            templateUrl: 'home/header.html',
                            controller: 'HeaderCtrl'
                        },
                        'footer': {
                            templateUrl: 'home/footer.html'
                        }
                    },
                    data: {
                        requiresLogin: true
                    }
                }).state('root.home', {
                    url: '/',
                    views: {
                        '@': {
                            templateUrl: 'home/home.html'
                        }
                    },
                    data: {
                        requiresLogin: true
                    }
                })
            $urlRouterProvider.otherwise('/');

            authProvider.init({
                domain: AUTH0_DOMAIN,
                clientID: AUTH0_CLIENT_ID,
                loginUrl: '/login'
            });

            jwtInterceptorProvider.tokenGetter = function(store) {
                return store.get('token');
            }

            $httpProvider.interceptors.push('jwtInterceptor');
        })
        .run(function($rootScope, auth, store, jwtHelper, $location, $state, $stateParams) {
            $rootScope.$on('$locationChangeStart', function() {
                if (!auth.isAuthenticated) {
                    var token = store.get('token');
                    if (token) {
                        if (!jwtHelper.isTokenExpired(token)) {
                            auth.authenticate(store.get('profile'), token);
                        } else {
                            $location.path('/login');
                        }
                    }
                }
            });
        })
        .controller('AppCtrl', function AppCtrl($scope, $location) {
            $scope.$on('$routeChangeSuccess', function(e, nextRoute) {
                if (nextRoute.$$route && angular.isDefined(nextRoute.$$route.pageTitle)) {
                    $scope.pageTitle = nextRoute.$$route.pageTitle + ' | Auth0 Sample';
                }
            });
        })

Если я вхожу в систему и корнем, который прокомментировал, все работает нормально. Но мне нужно добавить верхний и нижний колонтитулы (файлы верны), и когда я пробую root + root.home, я получаю пустой экран без ошибок в консоли браузера.

Я пытаюсь отключить несколько примеров из онлайн (например, этот), но никто из них не работает, поэтому я не знаю, что я делаю неправильно.

Прямо сейчас мой заголовок /footer.html просто скажу header/footer.html, в то время как у дома есть кнопка на нем.

Добавлен полный app.js в случае, если это поможет. Каждый html (footer/header/home) просто имеет

<h1>Home</h1>
<div ui-view></div>

Изменение: index.html

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

app.js

.state('root.home', {
            url: '/',
            views: {
                '@': {
                    templateUrl: 'views/home.html',
                    controller: 'HomeCtrl'
                }
            },
            data: {
                requiresLogin: true
            }
        })
Теги:
angular-ui-router

1 ответ

1
Лучший ответ

Я считаю, что ваша проблема здесь заключается в том, что ваш маршрут ищет представление с именем container, а не классом.

<div ui-view="container"></div>

Поскольку он не может найти имя с именем, которое не вставляет ничего в представление.

Или вы можете просто изменить свой маршрут просмотра:

views: {
            '@': {
                templateUrl: 'home/home.html'
            }

Что скажет ему вставить этот HTML-код в первый неназванный вид, который он находит.

Вы можете найти разбивку того, как вложенные представления работают с UI-Router здесь

Предполагая, что ваш home.html выглядит так:

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

ваш маршрут должен быть чем-то вроде

 views: {
                'header@home': {
                    templateUrl: 'home/header.html',
                    controller: 'HeaderCtrl'
                },
                'footer@home': {
                    templateUrl: 'home/footer.html'
                }
            },
            data: {
                requiresLogin: true
            }
Поделиться
  • 0
    Я внесла изменения, которые вы предложили, все еще получая пустой экран, но до сих пор не могу понять, почему. Изменить: добавил весь мой app.js на случай, если что-то не так по пути.
  • 0
    Каков HTML вашего home.html? Вызывает ли это представление с именем «Верхний колонтитул» и «Нижний колонтитул»? Я не вижу, где находятся ваши пользовательские интерфейсы для этих представлений. Предполагается, что они идут в index.html или в home.html? Сейчас он пытается найти <div ui-view = 'header' /> в родительском представлении. Если эти представления находятся в home.html, необходимо, чтобы представление было header @ home (найдите представление с именем header в представлении, загруженном состоянием home). Это может сбить с толку, поэтому я предлагаю вам посмотреть образцы в документах, которые проходят через все это.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню