我有一个基于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

08-26 21:47
查看更多