Difficulties reaching a child state with Ionic / UI-Router

Question

I have the following parent states:

  // setup an abstract state for the tabs directive
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html",
    controller: "TabCtrl"
  })

  // Each tab has its own nav history stack:
  .state('tab.home', {
    url: '/home',
    views: {
      'menuContent': {
        templateUrl: 'templates/tab-home.html',
        controller: 'HomeCtrl',
        resolve: {authResolve: authResolve}
  }
}

})

// 
.state('tab.dash', {
    url: '/dash',
    views: {
      'menuContent': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl',
        resolve: {authResolve: authResolve}
      }
    }
  })

and the following child state of tab.dash

  .state('tab.album', {
    url: '/dash/:albumName',
    views: {
      'menuContent': {
        templateUrl: 'templates/tab-album.html',
        controller: 'AlbumCtrl',
        resolve: {authResolve: authResolve}
      }
    }
  })

In addition I have one independent state

// none tabs/nonview pages
  .state('neutral', {
    url: '/neutral',
    templateUrl: 'templates/single-neutral.html',
    controller: 'NeutralCtrl',
    resolve: {authResolve: authResolve}
  })

THE PROBLEM

In the independent state neutral, when I try to redirect to the child state tab.album then it only works if first I reached the neutral state from tab.album. When I reach neutral from tab.home and then try to redirect to tab.album, then I get redirected to tab.dash, the parent of tab.album. So to make it more clear:

This works:

tab.home > tab.dash > tab.album > neutral > tab.album

This does not work:

tab.home > neutral > tab.album

What is the reason for this and how can I solve it?

@johnandrews I have the same problem. If you fixed it, could you please edit and upload your solution? — fuxes
– fuxes, Commented Sep 15, 2015 at 20:35

Aaron Saunders · Accepted Answer · 2015-05-16 23:44:50Z

1

here is a blog post that shows how to force the tab to go to the top level whenever it is activated. http://www.clearlyinnovative.com/ionic-framework-tabs-go-home-view/

the codepen: http://codepen.io/aaronksaunders/pen/rlvFq

You should be able to use the same approach to tell the tab to goto a particular child state based on a stateParameter you pass to it.

answered May 16, 2015 at 23:44

Aaron Saunders

33.4k5 gold badges64 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

Difficulties reaching a child state with Ionic / UI-Router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related