ion-nav-bar button disppears when routing

Question

I have a Ionic application with a nav bar and left side menu. The nav bar contains a "hamburger" button that expands the left side menu. The side menu contains a list of buttons that link to the different content areas of the application. When navigating from the items in the content menu, the content area of the application is updated correctly, and the hamburger icon remains in place in the nav bar. When navigating from a button in the content area, the hamburger icon disppears from the nav bar.

The following code demonstrates (http://codepen.io/FrizziestFuture/pen/pJgvPN). Here, the button on Page A links to Page B, but causes the hamburger icon to disappear. The side menu links work correctly.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <link href="http://code.ionicframework.com/1.0.0-rc.5/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script>
</head>

<body ng-app="myApp">
  <ion-side-menus>
    <ion-pane ion-side-menu-content>
      <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons>
          <button menu-toggle="left" class="button button-icon ion-navicon"></button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-pane>
    <ion-side-menu side="left">
      <ion-content>
        <ion-list>
          <ion-item nav-clear menu-close ui-sref="pageA">Page A</ion-item>
          <ion-item nav-clear menu-close ui-sref="pageB">Page B</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>
</body>
<script id="templates/pageA.html" type="text/ng-template">
  <ion-view>
    <ion-content>
      <h1>Page A</h1>
      <button ui-sref="pageB">Go to Page B</button>
    </ion-content>
  </ion-view>
</script>
<script id="templates/pageB.html" type="text/ng-template">
  <ion-view>
    <ion-content>
      <h1>Page B</h1>
    </ion-content>
  </ion-view>
</script>
<script src="myApp.js"></script>
</html>

angular.module("myApp", ["ionic"])
.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/pageA");

    $stateProvider
    .state("pageA", {
        url: "/pageA",
        templateUrl: "templates/pageA.html"
    })
    .state("pageB", {
        url: "/pageB",
        templateUrl: "templates/pageB.html"
    });
});

For documentation see ionicframework.com/docs/api/directive/menuToggle — Stefan van de Vooren

Pedro -Coin- Duarte Pedro -Coin- Duarte · Accepted Answer · 2016-08-24T05:49:33

Geez. I spent so much time to find it, that I have to share it more explicity here.

All credits goes to Stefan van de Vooren, and the link he provided here.

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 ionSideMenus directive to true.

<ion-side-menus enable-menu-with-back-views="true">

source provided by Stefan van de Vooren: http://ionicframework.com/docs/api/directive/menuToggle/

ion-nav-bar button disppears when routing

2 Answers