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屋！
