在抽象父母上有多個視圖的ui路由器

我想創建一個route層次結構，其中包含ui-router，我遇到了問題。在抽象父母上有多個視圖的ui路由器

我有三層模板：訪客模板，用戶模板，管理模板。所以我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'} 
    } 
})

我該怎麼辦？

來源

2014-06-25 Kousha

「當我做定義這種狀態下，我還是想有機會獲得我原本在user.html創建的三個觀點。」你的意思是你想讓這些視圖與你的'user.schedule'視圖一起顯示嗎？ –

自從問了這個問題之後已經有一段時間了，但我可能會面臨完全相同的問題，並且不太清楚爲什麼這裏的答案不適合我。要求你提供一個這樣或那樣的東西？ –

我很確定您在user.html中定義的左/主/右視口僅適用於抽象狀態爲user的直系子女。隨後會發現您在user.schedule.view狀態中聲明的視圖必須與user.schedule模板中的命名視口相對應。

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

即。此外

.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'} 
    } 
})

，我不知道這是正確的表格：更改此：

.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'} 
    } 
})

這個

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

我上午肯定這是適當的形式（per the docs）：

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

或

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

來源

2014-06-25 06:15:49

在抽象父母上有多個視圖的ui路由器

回答

相關問題