Nav back button not displayed in ion-view ionic

Question

i want to create nav back button in an ion-view. I try this code:

<ion-view view-title="Event details">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
<ion-content >
</ion-content>
</ion-nav-view>

But i don't get the button. Any kind of help is appreciated.

Raj Nandan Sharma Raj Nandan Sharma · Accepted Answer · 2016-04-21T04:47:39

The Back button wont show up if there is no history. History gets deleted when the page or app is refreshed. This is very common while developing in a browser. But this wont be the case in a device as you cannot refresh the app.

First way to show back button

in index.html

<body ng-app="starter" ng-controller="AppCtrl" class="">
    <ion-nav-bar id="mainNav" class="bar-dark">
        <ion-nav-back-button class="button-clear">
            <i class="icon ion-ios-arrow-back"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view animation="slide-left-right" class="scFont appFontSmall"></ion-nav-view>
  </body>

Second way to show back button is to handle it by your own. index.html can have the same code as above. but a view will have something like this

<ion-view  view-title="Title"  hide-back-button="true"> 
      <ion-nav-buttons side="left"> 
           <a ng-click="goBackState()" class="button button-icon icon ion-ios-arrow-back"></a>
      </ion-nav-buttons>
      <ion-content>
      </ion-content
 </ion-view>

The goBackState() is a function you might want to place inside your app.run function

$rootScope.goBackState = function(){
  $ionicViewSwitcher.nextDirection('back');
  $ionicHistory.goBack(); 
}

But remember this function also won't work if there is no history. Hope this helps

Nav back button not displayed in ion-view ionic

1 Answers