5

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

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

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

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' })

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?

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.

Improve this question

2 Answers 2

Reset to default
8

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

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' }

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

You got it. (One quick type note: the url for 'projects.one.default' should be an empty string because it inherits the url from projects.one
"The reason is because projects.one matches before projects.one.campaigns". What does that mean?
@JosephSilber when the ui.router receives a state transition request with some name it will iterate through the state list's url and return the first url that begins (or if it has variables, it will 'match' in terms of regular expressions) with the requested url.
@fabrizioM - I'm still puzzled. Are you saying that in addition to responding to a /projects/:id url, the projects.one state also responds to /projects/:id/*?
2014 today, you saved my day(infact night wasted whole day doing this)
1

I just spent whole day dealing with this problem.

I found out, that you don't need abstract states at all!

Try this: index.html:

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

use directive ui-view as a tag in the top level template.

Now all your nested templates wrap like this:

<ui-view> <div> template code </div> </ui-view>

and now you can just:

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

I needed general solution for the nesting and this works. Now you can create very deep nesting easily (for example one.campaing.group.member.note). If you will use ui-view on the top level and wrap all templates with the ui-view, they contact of each template will replace content of the top level ui-view (which is empty).

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.