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

时间:2015-08-21 10:03:31

标签: javascript angularjs angular-ui-router templating

我使用UI-Router模块进行路由。我有两种状态,路由器应根据嵌套路由规则匹配网址:

// 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时,它会显示来自index.html州的users而非来自show.html州的users.id。问题是什么?

1 个答案:

答案 0 :(得分:1)

如果您致电users

,则应在users.id的网址定义中添加http://127.0.0.1:8000/app/#/users/testuser123
.state('users.id', {
    url: "/users/{id:(?:[a-z0-9_-]{3,16})}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})