这是我的 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 时，我在浏览器的控制台上得到一个空白屏幕，也没有任何错误。
我正在尝试从网上摘取一些示例(例如 this 一个)，但没有一个有效，所以我不知道我做错了什么。
现在我的 header/footer.html 只是说 header/footer.html 而主页上有一个按钮。
添加了完整的 app.js 以防有帮助。每个 html(页脚/页眉/主页)只有
<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>
应用程序.js
.state('root.home', {
url: '/',
views: {
'@': {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
}
},
data: {
requiresLogin: true
}
})
最佳答案
我相信您的问题是您的路线正在寻找名为容器而不是类的 View 。
<div ui-view="container"></div>
由于找不到名为的 View ，因此不会在 View 中插入任何内容。
或者您可以将您的 View 路线更改为:
views: {
'@': {
templateUrl: 'home/home.html'
}
这将告诉它在它找到的第一个未命名 View 中插入该 HTML。
您可以找到如何分割 nested views work with UI-Router here
假设您的 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
}
关于javascript - 如何使用 angularjs 和 ui-router 正确显示页眉/页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36242581/