Angular UI-路由器 - 子状态和父状态中的参数返回错误的模板

Question

我有一个基于 Angular 和 UI-路由器的应用程序。我正在尝试获得以下 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 return 是正确的模板，但 /base/category/id 也是 return 类别模板（我希望它 return id_view.html).我可能想稍后添加更多动态参数，所以我想要一个干净的解决方案。这是我目前的解决方法：

.state('base.id', {
    url: '/:catId/:id',
    templateUrl: 'views/id_view.html'
});

它可以工作，但 UI-路由器不会触发我菜单中的活动类。

感谢您花时间阅读本文，如果您能指出正确的方向，对我帮助很大！

Answer 1

上面的代码有a working example

你的概念没问题，只是确定 parent 有其 child 的位置：

<div ui-view></div>

因此，在我们的例子中，我将上面的行添加到 views/cat_view.html 中。即parent状态视图'base.cat.id'。这些链接现在有效：

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

实际查看 here

Angular UI-路由器 - 子状态和父状态中的参数返回错误的模板

Angular UI-Router - parameters in child and parent state returning wrong template

javascript

state

nested

angularjs

angular-ui-router