我有一个基于Angular和UI-Router的应用程序。我正在尝试获取以下网址结构
/base/category
/base/category/id
同时为每个路线提供不同的模板。
我一直在搜索很多东西,但是找不到任何可以帮助我的东西。
我的代码:
$stateProvider
.state('app', {
url: '',
templateUrl: 'views/app.html',
abstract: true
})
.state('base', {
url: '/base',
template: '<div ui-view></div>',
abstract: true,
parent: 'app'
})
.state('base.cat', {
url: '/:catId',
templateUrl: 'views/cat_view.html'
})
.state('base.cat.id', {
url: '/:id',
templateUrl: 'views/id_view.html'
});
访问/ base / category返回正确的模板,但是/ base / category / id也返回类别模板(我希望它返回id_view.html)。以后我可能想添加更多的动态参数,因此我想要一个干净的解决方案。
这是我目前的解决方法:
.state('base.id', {
url: '/:catId/:id',
templateUrl: 'views/id_view.html'
});
它可以工作,但是UI-Router不会触发菜单中的活动类。
如果您能为我指出正确的方向,这对我有很大帮助,感谢您抽出宝贵的时间阅读本文!
最佳答案
上面的代码有a working example
您的想法还可以,只要确定,父母就可以为其子女提供住房:
<div ui-view></div>
因此,在本例中,我将上述行添加到了
views/cat_view.html
中。那是状态“ base.cat.id”的父状态视图。这些链接现在可以正常工作:<a href="#/base/category">
<a href="#/base/category/1">
<a href="#/base/category/22">
进行检查here