CODEWITHSUNDEEP
angularjsionic-frameworkangular-ui-routerangular-ui
stackdisplay
stackdisplay

Reputation: 2045

Unable to navigate to child state in ui router

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>

Upvotes: 1

Views: 287

Answers (2)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

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

Upvotes: 2

T J
T J

Reputation: 43156

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.

Upvotes: 0

Related Questions