Question

我试图实现ui-router的{{3}}维基页面中显示的内容。示例如下：

$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

指向doc的链接：

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循viewname@statename方案的绝对名称，其中 viewname 是视图指令中使用的名称，状态名称是状态＆＃39 ; s绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

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

1 个答案:

View Names - Relative vs. Absolute Names