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>