How to force Ionic display back button on certain page? - ionic-framework

Question

When navigating from one page to another, Ionic automatically display back button at the navigation bar. However, there are certain case where ionic don't display the back button. For example, when you navigate from a tab page to a none tab page.
How can I force Ionic to display back button on certain page?
Javascript:
.state('app.tab.playlists', { //<!-- Tab content page
url: '/playlists',
views: {
'tab-Content': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
url: '/singer',
views: {
'menuContent': {
templateUrl: 'templates/singer.html'
}
}
})

Answer 1

You can tell it in your controller. Try:
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
But like LeftyX said. The history function for tab to non tab view is buggy.

Answer 2

Ionic manages a history while you're navigating from one view to the other.
$ionicHistory keeps track of views as the user navigates through an
app. Similar to the way a browser behaves, an Ionic app is able to
keep track of the previous view, the current view, and the forward
view (if there is one). However, a typical web browser only keeps
track of one history stack in a linear fashion.
Unlike a traditional browser environment, apps and webapps have
parallel independent histories, such as with tabs. Should a user
navigate few pages deep on one tab, and then switch to a new tab and
back, the back button relates not to the previous tab, but to the
previous pages visited within that tab.
There's a bug open on github which hasn't been fixed yet (and will only be fixed in 2.0) where Adam Bradley states:
The back button does not display because when you go into a tab, it
enter's it own "history", meaning each tab has its own navigation back
and forward.
So, basically, when you move from tabs to regular view you're going to lose the back button.
What you can do is to create one yourself:
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
and place it inside your view:
<ion-view view-title="home">
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
<ion-content padding='true' scroll='false' has-footer='false'>
<div class="card">
<div class="item item-text-wrap">
HOME PAGE
</div>
</div>
</ion-content>
</ion-view>
As you can see I've used ng-click="goBack()" for the button.
In your controller you simply would:
$scope.goBack = function(){
$ionicHistory.goBack();
}
don't forget to inject $ionicHistory in your controller.
PS: This is a over-simplified solution as it does not check if the history has got a backview:
$ionicHistory.viewHistory().backView

Answer 3

Add follwing lines inside your
<ion-navbar hideBackButton="true">
<button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>