Question

我正在使用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上我有

<div ui-view></div>

我显示所有页面，除此之外我有徽标，菜单等。我想在显示404页面时隐藏它。

我该怎么做？

Answer 1

我个人会重新设计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中只有一个<div ui-view></div>。此外，如果您这样做，请不要忘记在ui-view内添加孩子appcontainer.html。

Answer 2

您可以创建一个根父级状态，其中包含您的布局内容（徽标，菜单等），并在其外部使用404。

<强>路由

find_package

<强> root.html

$stateProvider
  .state('root', {
    abstract: true, // makes this state not directly accessible
    templateUrl: 'root.html'
  })
  .state('root.stateIndex', {
    url: '/',
    templateUrl: '/templates/list.html',
    controller: 'dashListController'
  })
  // ...
  .state('404', {
    url: '/404',
    templateUrl: '/templates/404.html'
  });

如何在整个页面上显示ui-router状态？

2 个答案: