在index.html中設置多個ui視圖時不顯示

Question

我正在嘗試實現ui-router的Multi-Named-Views Wiki頁面中所示ui-router 。 示例如下：

$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

指向文檔的鏈接：

視圖名稱-相對名稱與絕對名稱

在幕后，每個視圖都被分配一個遵循viewname@statename方案的絕對名稱，其中viewname是視圖指令中使用的名稱，狀態名稱是該州的絕對名稱，例如contact.item 。 您還可以選擇以絕對語法編寫視圖名稱。