ui-router在抽象父級上有多個視圖

Question

我正在嘗試使用ui-router創建route層次結構，我遇到了問題。

我有三層模板：訪客模板，用戶模板，管理模板。 所以我的index.html頁面是：

<html>
<head><!-- All common JS/CSS files such as Foundation and AngularJS --></head>
<body>
    <!-- Some common directive such as <reveal></reveal> used for dialog/popin pages -->
    <ui-view></ui-view>
</body>
</html>

然后，對於我的每個圖層，我都有另一個模板。 例如，對於我有的guest ：

guest.html

<nav><!-- The navigation for guest page --></nav>
<ui-view></ui-view>

對於user它稍微復雜一些：

user.html

<nav><!-- The navigation for user page --></nav>
<ui-view="left"></ui-view>
<ui-view="main"></ui-view>
<ui-view="right"></ui-view>

現在，我的guest狀態非常簡單：

$stateProvider
    .state('guest', {
        abstract: true,
        templateUrl: 'path/to/guest.html' 
    })
    .state('guest.login', {
        url: '/login/',
        template: '<login></login>'
    });

問題隨着user 。 就像上面一樣，我創建了一個abstract狀態，將user.html添加到模板中，並允許我訪問3個視圖。 通常，如果我然后擴展狀態，我可以寫為三個狀態

.state('user.home', {
    url: '/home/',
    views: {
        'left':  { template: 'Left template' },
        'main':  { template: 'Main template' },
        'right': { template: 'Right template'}
    }
});

問題是我想在這里定義另一個抽象，名為user.schedule ，這些抽象狀態有幾個孩子。 當我確定這個狀態時，我仍然希望能夠訪問我最初在user.html創建的三個視圖。 但是，由於這是一個抽象類，我需要為它定義模板。

我無法弄清楚如何繼續這個抽象類。 我“想到”我應該做的是：

.state('user.schedule', {
    abstract: true,
    views: {
        'left':  { template: '<ui-view></ui-view>' },
        'main':  { template: '<ui-view></ui-view>' },
        'right': { template: '<ui-view></ui-view>'}
    }
})
.state('user.schedule.view', {
    url: '/schedule/:day/:month/:year',
    views: {
        'left':  { template: 'This should work?' },
        'main':  { template: 'But it does not' },
        'right': { template: 'I even tried giving the ui above a name and calling them here'}
    }
})

我能做什么？

Answer 1

我很確定你在user.html中定義的左/右/右視口僅對user抽象狀態的直接子user.html可用。 然后，您在user.schedule.view狀態中聲明的視圖必須與user.schedule模板中的命名視口對應。

嘗試在user.schedule模板的left ， main和right命名視口。 可能會有名稱沖突，但嘿，值得一試。

即。 改變這個：

.state('user.schedule', {
    abstract: true,
    views: {
        'left':  { template: '<ui-view></ui-view>' },
        'main':  { template: '<ui-view></ui-view>' },
        'right': { template: '<ui-view></ui-view>'}
    }
})
.state('user.schedule.view', {
    url: '/schedule/:day/:month/:year',
    views: {
        'left':  { template: 'This should work?' },
        'main':  { template: 'But it does not' },
        'right': { template: 'I even tried giving the ui above a name and calling them here'}
    }
})

對此：

.state('user.schedule', {
    abstract: true,
    views: {
        'left':  { template: '<ui-view="left"></ui-view>' },
        'main':  { template: '<ui-view="main"></ui-view>' },
        'right': { template: '<ui-view="right"></ui-view>'}
    }
})
.state('user.schedule.view', {
    url: '/schedule/:day/:month/:year',
    views: {
        'left':  { template: 'This should work?' },
        'main':  { template: 'But it does not' },
        'right': { template: 'I even tried giving the ui above a name and calling them here'}
    }
})

另外，我不確定這是否是正確的形式：

<ui-view="name"></ui-view>

我相信，這是（適當的形式按照文檔）：

<ui-view ui-view="name"></ui-view>

要么

<div ui-view="name"></div>

ui-router在抽象父級上有多個視圖

問題描述

1 個解決方案

解決方案1
2 已采納 2014-06-25 06:15:49

ui-router在抽象父級上有多個視圖

問題描述

1 個解決方案

解決方案1 2 已采納 2014-06-25 06:15:49

解決方案1
2 已采納 2014-06-25 06:15:49