子状态在 UI-Router 的嵌套路由中加载父状态 templateUrl答案

【问题标题】：Child state loads parent state templateUrl in nested routes of UI-Router子状态在 UI-Router 的嵌套路由中加载父状态 templateUrl
【发布时间】：2015-11-15 05:46:02
【问题描述】：

我正在使用UI-Router 模块进行路由。我有 2 个状态，路由器应根据嵌套路由法将 url 与它们匹配：

// Dashboard
.state('dashboard', {
    url: "/dashboard",
    templateUrl: "dashboard/views/index.html",
    controller: "DashboardController",
    ...
})

// Users
.state('users', {
    url: "/users",
    templateUrl: "users/views/index.html",
    controller: "UsersController",
    ...
})

// Single User
.state('users.id', {
    url: "/{id:(?:[a-z0-9_-]{3,16})}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})

我也设置了默认路由：

$urlRouterProvider.otherwise("/dashboard");

问题：

当我转到http://127.0.0.1:8000/app/#/users/testuser123 时，它显示来自users 状态的index.html，而不是来自users.id 状态的show.html。有什么问题？

【问题讨论】：

标签： javascript angularjs angular-ui-router templating

【解决方案1】：

如果您调用http://127.0.0.1:8000/app/#/users/testuser123，您应该在users.id 的url 定义中添加users

.state('users.id', {
    url: "/users/{id:(?:[a-z0-9_-]{3,16})}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})

【讨论】：