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?

Squeaky Squeaky · Accepted Answer · 2015-01-30T14:41:55

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.

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

2 Answers