ionic / angular 1.3 - Missing ion-nav-back-button when ion-side-menus exist inside view

Question

I can't seem to figure out how to get a back button to appear on a view that contains a ion-side-menus directive.

Here's the absolute simplest example I've come up with: http://codepen.io/jsplaine/pen/YPxvXL?editors=101.

Note that the ion-views in state x.emptyView and state x.emptySideMenu are children of state x's ion-nav-view.

Here's a more in-depth example, where there exists a side-menu that is actually populated: http://codepen.io/jsplaine/pen/ZYJRYW?editors=101

Here's the basic router, for the first codepen:

angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('app', {
      url: "/",
      templateUrl: "templates/home.html",
      controller: 'AppCtrl'
    })

    .state('x', {
      url: "/x",
      abstract: true,
      template: '<ion-nav-view animation="slide-left-right"/>'
    })

    .state('x.emptyView', {
      url: "/empty-view",
      templateUrl: "templates/empty_view_only.html"
    })

    .state('x.emptySideMenu', {
      url: "/empty-side-menu",
      templateUrl: "templates/empty_side_menu.html"
    })
})

There's a second issue with the more in-depth codepen. Depending on which tab you click first, the 2nd or the 3rd, the corresponding template gets cached for future navigation to BOTH the 2nd and 3rd template. Click the 2nd one first, then the 3rd. Then start over and click the 3rd one first then the 2nd. The fact that this is happening makes me thinking that I'm using ui-router wrong somehow.

I also don't understand why I have to define ion-nav-view in both index.html AND in the abstract state ('x') template. Isn't state 'x' a child of index.html (the empty state)?

Can someone figure out how to modify both codepens so that the back button appears on views containing a ion-side-menus directive, and for the 2nd codepen .. the 2nd and 3rd tab caching issue is resolved?

Answer 1

The solution can be seen here:

http://codepen.io/jsplaine/pen/wBqNmw?editors=101

It seems that ion-side-menus' parent ion-view needs a child ion-nav-bar, and enable-menu-with-back-views must be set to true.

<!-- Side Menu Nav and Burger Defined -->
<script id="templates/side_menu_with_nav.html" type="text/ng-template">
   <ion-view view-title="Side Menu with Nav and Burger">
       <ion-nav-bar></ion-nav-bar> <!-- HERE -->
       <ion-side-menus enable-menu-with-back-views="true">
           <ion-side-menu-content>
               <ion-nav-bar> 
                   <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
                   <ion-nav-buttons side="right">
                       <button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button>                    
                   </ion-nav-buttons>
               </ion-nav-bar>
....

As the ionic directive/menuToggle docs state: https://github.com/driftyco/ionic/blob/master/js/angular/directive/menuToggle.js#L1

• ### Button Hidden On Child Views
• By default, the menu toggle button will only appear on a root
• level side-menu page. Navigating in to child views will hide the menu-
• toggle button. They can be made visible on child pages by setting the
• enable-menu-with-back-views attribute of the {@link >ionic.directive:ionSideMenus}
• directive to true.

Answer 2

I wonder if the authors didn't take your case into account. Their model is a slide-in menu that only slides in partially and can be toggled with a menu icon. So you may be a bit off paradigm but this seemed to work for me albeit a bit lame for duplicating the nav-bar code in the template.

<script id="templates/empty_side_menu.html" type="text/ng-template">
  <ion-view view-title="Empty side menu">
    <ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-stable">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-side-menus>           
    </ion-side-menus>
  </ion-view>
</script>