Sidemenu template, ion-nav-back-button, ion-navicon and $state.go('/app/playlists')

The sidemenu template has several nested states defined in app.js. When you navigate to a nested state (e.g., ‘app.single’) the ion-nav-bar is updated with a ‘< Back’ button.

When you return to the ‘home page’ (’/app/playlists’) the back button is replaced with a ion-navicon (see menu.html). You can also transition to the home page by adding a simple function to a controller:

$scope.goHome = function() {
  $state.go('app.playlists');
};

If you add another level of nested state:

.state('app.playlists.classic-rock', {
  url: "/classic-rock",
  views: {
    'menuContent@app': {
      templateUrl: "templates/classic-rock.html",
       controller: 'ClassicRockController'
    }
  }
})

And invoke the goHome() function from the views controller you do transition to the home page, however, the back button is NOT replaced with the ion-navicon?

This is also the case if you navigate from one view to another view and then back to the ‘home page’:

In the sidemenu template’s menu.html:

<ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
        </button>
      </ion-nav-buttons>
</ion-nav-bar>

ion-nav-buttons must be a direct descendant of ion-nav-view NOT ion-nav-bar.

Updated menu.html:

<ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
</ion-nav-bar>

and updated playlists.html:

<ion-view view-title="Playlists">

    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
        </button>
    </ion-nav-buttons>

  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" 
          href="#/app/playlists/{{playlist.id}}">
          {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Some more detail and a work around:

-> http://robferguson.org/2015/01/07/ionics-sidemenu-template-and-nested-states/

1 Like

Thanks for the post! Glad I’m not the only person who has encountered it – was having a hard time figuring out if it was user error! Looking for a more ‘elegant’ solution though: I’m managing ~20 states, and I’m thinking I shouldn’t have to put ion-nav-buttons or ion-nav-back-button on every state. Think this may be a valid bug. I’ve tried every other workaround: removing <ion-nav-back-button> from menu.html, $ionicHistory.nextViewOptions({historyRoot:true}), $location.replace(), nav-clear on the link to home home/less nested state, and I can’t find anything that systematically fixes the issue…I don’t know of a use case in which this would be desired behavior, so this may be a valid bug.

FWIW, I’ve implemented another workaround for the issue I’ve experienced (clicking a link which takes you to your app’s main state, when you don’t want to display back, but logically in the history the back button should show) that doesn’t require sticking an <ion-nav-back-button> on every state you want it. The simple workaround is just adding this to whatever state you never want to show a back button for:

$scope.$on('$ionicView.beforeEnter', function (e,config) {
  config.enableBack = false;
}

Voila!

@robf So, they just removed this from the 1.0.1 milestone. See https://github.com/driftyco/ionic/issues/3686#issuecomment-112556488