在 index.html 中设置多个 ui-view 时不显示

Question

我正在尝试实现 ui-router 的 Multi-Named-Views wiki 页面中所示的内容。示例如下：

$stateProvider
  .state('report', {
    views: {
      'filters': { ... templates and/or controllers ... },
      'tabledata': {},
      'graph': {},
    }
  })

我当前的设置如下所示，路由无法正常工作。不确定我在这里做错了什么？

我目前的 index.html 看起来像这样：

<body>
    <div ui-view="anonymous"></div>
    <div ui-view="home"></div>
</body>

然后我的app.js:

app.constant("AccessLevels", {
    anon: 0,
    user: 1
});

    app.config(["$stateProvider", "$urlRouterProvider", "AccessLevels", function ($stateProvider, $urlRouterProvider, AccessLevels) {

        /* ANONYMOUS USERS */
        $stateProvider
            .state('anon', {
                abstract: true,
                template: '<ui-view/>',
                data: {
                    access: AccessLevels.anon
                }
            })
            .state('anon.login', {
                url: '/login',
                views: { 
                    anonymous: {
                        templateUrl: 'Client/scripts/app/partials/account/login.html',
                        controller: 'loginCtrl'
                    }
                }
            })
            .state('anon.register', {
                views: {
                    anonymous: {
                        url: '/register',
                        templateUrl: 'Client/scripts/app/partials/account/registration.html',
                        controller: 'registerCtrl'
                    }
                }
            });

        /* AUTHENTICATED USERS */
        $stateProvider
            .state('user', {
                abstract: true,
                template: '<ui-view/>',
                data: {
                    access: AccessLevels.user
                }
            })
            .state('user.home', {
                views: {
                    'home': {
                        url: '/home',
                        templateUrl: 'Client/scripts/app/partials/home/dashboard/index.html',
                        controller: 'homeCtrl'
                    }
                }
            })
            .state('user.deliveries', {
                views: {
                    'home_content': {
                        url: '/home/deliveries',
                        templateUrl: 'Client/scripts/app/partials/home/deliveries/deliveries.html',
                        controller: 'deliveryCtrl'
                    }
                }
        });

        $urlRouterProvider.otherwise('/login');
    }]);

Answer 1

一般来说，如果我们以父级为目标，我们只能使用简化的、所谓的相对视图目标名称。那不是你的情况，因为

.state('anon', {
    abstract: true,
    template: '<ui-view/>', // parent contains unnamed view
    ... 
})
.state('anon.login', {
    url: '/login',
    views: { 
        anonymous: { // this view is not in parent

所以我们必须使用绝对命名

.state('anon.login', {
    url: '/login',
    views: { 
        'anonymous@': { // no we target root
        // realtive
        '' : { // here we target unnamed parent view
        // absolute
        '@anon' : { //the same as the line above

A link 文档:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

在 index.html 中设置多个 ui-view 时不显示

No display when setting up multiple ui-view in index.html

angularjs

angular-ui-router

View Names - Relative vs. Absolute Names