CODEWITHSUNDEEP
angularjsangular-ui-router
CodyBugstein
CodyBugstein

Reputation: 23302

Why isn't my nested state path in Angular UI-Router working?

I'm trying to get one thing to show when the user visits

mysite.com/projects

and another thing to show when they visit

mysite.com/projects/project

However, despite following the tutorial in the official documentation, my set up won't work.

Does anyone see where I'm going wrong? I've looked at everything and compared character for character with the official docs.

See my Plunkr

Upvotes: 0

Views: 110

Answers (2)

Guillaume Besson
Guillaume Besson

Reputation: 572

You have two problems in your exemple.

First, your link to the projects.project state is incorrect. You need to put the full name of the state in the ui-sref attribute, so projects.project.

Next, your trying to use nested state. When navigating to the projects.project state, the projects.project state will not replace the projects state. In fact, the projects state will host the child state. So you need to add the ui-view directive inside your projects template (the r1.html file).

Here is a functionnal Plunkr: http://plnkr.co/edit/LyBM4QiKiw8sAoI0jiKo

Upvotes: 1

Claies
Claies

Reputation: 22323

You are mixing concepts in your states. In some places you are referencing /project as it's own state, in others you are trying to reference it as a child state of /projects.

You can only use projects.project when you are embedding the contents of the child within the template of the parent.

I created two forks of your Plunkr, showing both independent routes and parent/child routes.

Note in the parent/child route, there is an additional <div ui-view></div> in the parent template.

Singular routes: http://plnkr.co/edit/jIMcdTuifE8oRpg83vtN?p=preview.

Parent/child: http://plnkr.co/edit/A85svCnngB7x4PJCUUf9?p=preview

Upvotes: 2

Related Questions