在角UI路由器嵌套路线

本文介绍了在角UI路由器嵌套路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

（AngularJS V1.2.0-rc.3 +角UI的路由器v0.2.0）

(AngularJS v1.2.0-rc.3 + Angular UI-Router v0.2.0)

在我的 index.html的，我有以下的code：

In my index.html, I have the following code:

<div class="container" ui-view></div>

在我app.js，我有以下的code：

In my app.js, I have the following code:

$stateProvider .state('projects', { abstract: true, url: '/projects', template: '<ui-view />', }) // below display properly .state('projects.list', { url: '', templateUrl: 'views/project_list.html', controller: 'ProjectListCtrl' }) // below display properly .state('projects.one', { url: '/{projectId:[0-9]{1,8}}', templateUrl: 'views/project_dashboard.html', controller: 'ProjectCtrl' }) // below does not display at all .state('projects.one.campaigns', { url: '/campaigns', template: 'I cannot seem to display this text' })

我可以打下面的路线就好了：的index.html /项目，的index.html /项目/ 1 ，但我不能打这个路线：的index.html /项目/ 1 /运动

I can hit the following routes just fine: index.html/projects, index.html/projects/1, but I cannot hit this route: index.html/projects/1/campaigns

有谁知道我为什么不能？

Does anyone know why I can't?

奖励积分，如果你能回答我怎么可以在相同的URL页面上的 projects.one <显示 projects.one.campaigns 状态/ code>状态。

Bonus points if you can answer how I could display the projects.one.campaigns state on the same URL page as the projects.one state.

推荐答案

究其原因是因为 projects.one 之前匹配 projects.one.campaigns

The reason is because projects.one matches before projects.one.campaigns

添加 projects.one 抽象状态，然后用templateUrl添加 projects.one.default 状态。

Add a projects.one abstract state and then add a projects.one.default state with the templateUrl.

.state('projects.one', { url: '/{projectId:[0-9]{1,8}}', abstract:true, template: '<ui-view/>', }) .state('projects.one.default', { url: '', templateUrl: 'views/project_dashboard.html', controller: 'ProjectCtrl' }) .state('projects.one.campaigns', { url: '/campaigns', template: 'I cannot seem to display this text' }

要显示projects.one的同一页上的广告系列的模板，你不应该使用一种状态，而是一个指令，而不是与在同一页上NG-显示切换。

To display the template of the campaigns on the same page of the projects.one you should not use a state but a directive instead and toggle with ng-show on the same page.