javascript - Angular UI-Router - 子状态和父状态中的参数返回错误的模板

Question

我有一个基于 Angular 和 UI-Router 的应用程序。我正在尝试获取以下 URL 结构

/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 路由器不会触发我菜单中的事件类。

感谢您花时间阅读本文，如果您能为我指明正确的方向，这对我很有帮助!

Answer 1

有a working example与上面的代码

你的概念没问题，只要确定，父项有其子项的位置:

<div ui-view></div>

因此，在我们的例子中，我将上述行添加到 views/cat_view.html 中。这是状态“base.cat.id”的父状态 View 。这些链接现在可以使用:

<a href="#/base/category">
<a href="#/base/category/1">
<a href="#/base/category/22">

实际检查 here