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

[RobFerguson]

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 (playlists.html) 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':

• http://localhost:8100/#/app/playlists (ion-nav-bar has ion-navicon)
• http://localhost:8100/#/app/playlists/1 (ion-nav-bar has '< Back' button)
• http://localhost:8100/#/app/playlists/2 (ion-nav-bar has '< Back' button)
• http://localhost:8100/#/app/playlists (ion-nav-bar has '< Back' button but should have ion-navicon)

[RobFerguson]

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>

[mhartington]

So what you are describing and the markup is actually correct.

http://codepen.io/mhartington/pen/azwojR

What you are describing is caused by the menu-close attribute.

http://ionicframework.com/docs/api/directive/menuClose/

So when you navigate via the side-menu, links that have the menu close attribute will clear the history and prevent a back-button from being shown.

In your case, you are navigating via $state.go, which doesn't have the logic that menu-close provides.

So you would need to add a bit to it.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

[foram-patel]

thanx @mhartington....
it solved my issue...