在抽象父级上具有多个视图的 ui-router [英] ui-router with multiple views on an abstract parent
问题描述
我正在尝试使用 ui-router 创建一个 route 层次结构，但我遇到了问题.
I am trying to create a route hierarchy with ui-router, and I am having issues.
我有三层模板:访客模板、用户模板、管理员模板.所以我的 index.html 页面是:
I have three layers of templates: guest template, user template, admin template. So my index.html page is:
<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 我有:
Then, for each of my layers, I have another template. For instance, for guest I have:
guest.html
<nav><!-- The navigation for guest page --></nav>
<ui-view></ui-view>
对于 user 来说稍微复杂一些:
and for user it is slightly more complicated:
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 的状态非常简单:
Now, my state for guest is quite simple:
$stateProvider
.state('guest', {
abstract: true,
templateUrl: 'path/to/guest.html'
})
.state('guest.login', {
url: '/login/',
template: '<login></login>'
});
user 出现问题.就像上面一样，我创建了一个 abstract 状态，该状态将 user.html 添加到模板中，并允许我访问 3 个视图.通常，如果我然后扩展状态，我可以将三个状态写入
Problem rises with user. Just like above, I create an abstract state that adds the user.html to the template and gives me access to the 3 views. Normally, if I then extend the state, I can write to the three states as
.state('user.home', {
url: '/home/',
views: {
'left': { template: 'Left template' },
'main': { template: 'Main template' },
'right': { template: 'Right template'}
}
});
问题是我想在这里定义另一个抽象，叫做user.schedule，这些抽象状态有几个孩子.当我定义这个状态时，我仍然想访问我最初在 user.html 中创建的三个视图.但是，由于这是一个抽象类，我需要为它定义模板.
The problem is that I want to define another abstract here, called user.schedule, and these abstract state has a few children. When I do define this state, I still want to have access to the three views I had originally created in the user.html. However, since this is an abstract class, I need to define the templates for it.
我不知道如何处理这个抽象类.我认为"我应该做的是:
I cannot figure out how to proceed with this abstract class. What I "thought" I should do was:
.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'}
}
})
我能做什么?
推荐答案
我很确定您在 user.html 中定义的左/主/右视口仅可用于user 抽象状态.然后，您在 user.schedule.view 状态中声明的视图必须对应于 user.schedule 模板中的命名视口.
I'm pretty sure the left/main/right viewports you defined in user.html are only available to immediate children of the user abstract state. It would then follow that the views you declare in your user.schedule.view state must correspond to named viewports in the user.schedule template.
尝试在user.schedule 模板left、main 和right 中命名视口.可能会发生名称冲突，但嘿，值得一试.
Try naming the viewports in your user.schedule templates left,main,and right. It's possible that there may be a name collision but hey, it's worth a shot.
即.改变这个:
.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'}
}
})
另外，我不确定这是正确的形式:
Also, I'm not sure that this is proper form:
<ui-view="name"></ui-view>
我我确信这是正确的形式(根据文档):
I am sure that this is proper form (per the docs):
<ui-view ui-view="name"></ui-view>
或
<div ui-view="name"></div>
这篇关于在抽象父级上具有多个视图的 ui-router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
