Unable to navigate to child state in ui router

Question

I have state as follow. I can navigate from app to app.child1. But I cannot navigate from app.child1 to app.child1.child2. There is no error in browser console. Do note that I am developing an ionic application but i dont think that this is ionic issue.

app.state('app', { url: '/app', abstract: true, templateUrl: '', controller: '' }) .state('app.child1', { url: '/app', views: { 'menuContent': { templateUrl: '', controller: '' } } }) .state('app.child1.child2', { url: '/app/child1/child2', views: { 'menuContent': { templateUrl: '', controller: '' } } })

Navigation:

<button ui-sref="app.child1.child2">Change Page</button>

make sure in your app.child1's template, there exist <div ui-view></div> directive, if not your app.child1.child2 will not get populated. — CozyAzure
– CozyAzure, Commented May 25, 2016 at 10:26

Radim Köhler · Accepted Answer · 2016-05-25 10:49:27Z

There is a working plunker

There are few issues with the state definition, which are covered in comments below:

 .state('app', { url: '/app', abstract: true, templateUrl: 'app.tpl.thml', controller: 'appCtrl' }) .state('app.child1', { // child1 should have url part /child1 // while the /app is inherited from parent //url: '/app', url:'/child1', views: { 'menuContent': { templateUrl: 'child1.tpl.html', controller: 'child1Ctrl' } } }) .state('app.child1.child2', { // all parts are inherited from parents // so just /child2 is enough //url: '/app/child1/child2', url: '/child2', views: { // we target named view in a grand parent // not in parent, we need to use the absolute name // 'menuContent': { 'menuContent@app': { templateUrl: 'child2.tpl.html', controller: 'child2Ctrl' } } })

These links will work now

<a href="#/app/child1"> <a href="#/app/child1/child2"> <a ui-sref="app.child1"> <a ui-sref="app.child1.child2">

Check it in action here

T J · Accepted Answer · 2016-05-25 10:26:45Z

Your states don't have a template (templateUrl: ''). They should have a template with ui-view directive where it's child state can be injected.

Collectives™ on Stack Overflow

Unable to navigate to child state in ui router

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related