我正在尝试使用 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>'
});
用户 出现问题。就像上面一样，我创建了一个 abstract 状态，将 user.html 添加到模板中并允许我访问 3 个 View 。通常，如果我然后扩展状态，我可以将三个状态写为
.state('user.home', {
url: '/home/',
views: {
'left': { template: 'Left template' },
'main': { template: 'Main template' },
'right': { template: 'Right template'}
}
});
问题是我想在这里定义另一个抽象，叫做user.schedule，这些抽象状态有几个 child 。当我定义这个状态时，我仍然想访问我最初在 user.html 中创建的三个 View 。但是，由于这是一个抽象类，我需要为它定义模板。
我不知道如何处理这个抽象类。我“认为”我应该做的是:
.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 中定义的左/主/右视口(viewport)仅适用于 user 的直系子级抽象状态。然后它会遵循您在 user.schedule.view 中声明的 View 状态必须对应于 user.schedule 中的命名视口(viewport)模板。
尝试在 user.schedule 中命名视口(viewport)模板 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>
我确定这是正确的形式(per the docs):
<ui-view ui-view="name"></ui-view>
或
<div ui-view="name"></div>
关于angularjs - 在抽象父级上具有多个 View 的 ui-router，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24400688/