Ionic nav views with side menus lose history when swtiching tab

Question

I'm trying to migrate a native app to Ionic but I'm experiencing one major issue which is almost certainly a blocker if I can't at least work around it.

Basically, I have an application with multiple tabs and each of them has a split view. I attached a plunker to demonstrate what a simplified app version would look like. My problem is that when switching tab, ion nav views do not keep their history. To be more specific about my example: after selecting a playlist from the side menu and switching tab to "Search" and then back to "Playlists", the navigation history on that tab is not preserved and gets reset to its "root" state.

I think this happens when the ion-nav-view element is not a direct child of the ion-tab element (as in my case, since it's inside a ion-side-menu-content), but I'm not quite sure.

Overall, I feel the app states in the example might need some love as well. What am I doing anything wrong? Is it a known Ionic limitation?

State provider configuration follows, below is the link for the full plunker example:

$stateProvider

    .state('tabs', {
    url: '/app',
    abstract: true,
    templateUrl: 'tabs.html',
    controller: 'AppCtrl'
  })

  .state('tabs.search', {
    url: '/search',
    views: {
      'search': {
        templateUrl: 'search.html'
      }
    }
  })
  .state('tabs.playlists', {
    url: '/playlists',
    views: {
      'menu': {
        templateUrl: 'playlists.html',
        controller: 'PlaylistsCtrl'
      },
      'menuContent': {
        templateUrl: 'empty.html'
      }
    }
  })
  .state('tabs.playlist', {
    url: '/playlists/:playlistId',
    views: {
      'menu': {
        templateUrl: 'playlists.html',
        controller: 'PlaylistsCtrl'
      },
      'menuContent': {
        templateUrl: 'playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });

Here's a plunker with the app: http://plnkr.co/edit/UZp3EE3l6X5IIdvpu477

Thank you!

PepeSalazar PepeSalazar · Accepted Answer · 2016-03-07T21:54:58

According to This other question, every time you navigate through a tab, it creates a new history, so there's no back. You would need to handle this with your own code. They propose to use the goBack() directly. Something like:

$ionicHistory.viewHistory().backView

Also, you would need to handle the case when there's no backView because you just logged in into the app.

Ionic nav views with side menus lose history when swtiching tab

1 Answers