Manage the menu and back buttons

710 Views Asked by At

Here currently my template. The app is based on ionic1 sidemenu template. menu.html

<ion-side-menus enable-menu-with-back-views="true" ng-controller="menuCtrl">
  <ion-side-menu-content>
    <ion-nav-bar class="" ng-class="{expanded: isExpanded, 'has-header-fab-left': hasHeaderFabLeft, 'has-header-fab-right': hasHeaderFabRight}" align-title="left">
      <ion-nav-back-button class="no-text"> </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-view name="fabContent"></ion-nav-view>
    <ion-nav-view name="menuContent" ng-class="{expanded: isExpanded}" ></ion-nav-view>
  </ion-side-menu-content>


  <ion-side-menu side="left" class="menu">
   ...
  </ion-side-menu>
</ion-side-menus>

I see the back-button has a wierd behaviour. For example: if from my home page I visit a page through the sidemenu items, I see just the menu (hamburger) button on the header of the next page. However, IF I visit the same page using a button in the home page I see the back-button. Sometimes they even show both.

How can I manually control the buttons' visibility and behavior?

Here the sample code to study the buttons behaviour http://plnkr.co/edit/ojjKKi?p=preview you can see at least 2 different behaviours for different navigation paths:

  • click on Browse from the left side menu -> you can see just menu button
  • click on Browse button on home page -> you can see back and menu buttons both

  • click on Search from the left side menu -> you can see just menu button

  • click on Search button on home page -> you can see both buttons overlapping! (this one is for some css issue I introduced by myself, I guess)

EDIT: I solved simply overriding the <ion-nav-buttons> behaviour each view a need it, without using <ion-nav-back-button> which needs <ion-nav-bar> as father directive. For example:

<ion-view view-title="myview">
  <ion-nav-buttons side="side">
    <button class="button back-button buttons no-text button-clear header-item" ng-click="prev()"><i class="icon ion-android-arrow-back"></i>  <span class="back-text"></span></button>
  </ion-nav-buttons>
  <ion-content ng-class="">
[...]
</ion-content>
0

There are 0 best solutions below