我正在使用ui-router进行状态处理.这工作正常,但现在我必须创建页面404,并希望在整个页面上显示它,而不是像其他页面一样在页面内显示.
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.hashPrefix('!').html5Mode({ enabled: true, requireBase: false }); $stateProvider .state('stateIndex', { url: '/', templateUrl: '/templates/list.html', controller: 'dashListController' }) .state('stateList', { url: '/list', templateUrl: '/templates/list.html', controller: 'dashListController' }).state('stateDashboard', { url: '/dashboard/:id', templateUrl: '/templates/dashboard.html', controller: 'dashboardController' }) .state('stateWidgetsList', { url: '/widgetsList', templateUrl: '/templates/widgetsList.html', controller: 'widgetsListController' }) .state('404', { url: '/404', templateUrl: '/templates/404.html' }); }]);
在我的index.html上我有
在我显示所有页面的地方,除此之外我还有徽标,菜单等.我想在显示404页面时隐藏它.
我该怎么做?
我个人会重新设计index.html,并将外部模板(徽标,菜单等)带入其自己的模板和状态.然后,您可以在ui-router层次结构中将子状态置于其下方.例如:
$stateProvider .state('app', { abstract: true, url: '', templateUrl: '/templates/appcontainer.html' }) .state('app.stateIndex', { url: '/', templateUrl: '/templates/list.html', controller: 'dashListController' }) .state('404', { url: '/404', templateUrl: '/templates/404.html' });
然后你只需要把你的标识/菜单等放在里面appcontainer.html
,然后在index.html里面放一个.此外,如果你这样做,不要忘记将孩子添加到
ui-view
里面appcontainer.html
.