How to force Ionic display back button on certain page?

ionic-v1
1

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'
    }
  }
})
1 Like
2

Ionic back button is based on the states -> you can go back from a child to a parent.
I think what You want here is a history back button, like in web browsers, right? Where it doesn’t matter where You came from You just want to go back to wherever You were.
If that is the case I’m afraid there is no such functionality in Ionic right now.

1 Like
3

@Yue_Hong I had the same request in my app. Here is how I implemented it:

In the view where you want to show the back button (in your case app.singer) put the following code below ion-view

<ion-nav-buttons side="left">
    <button class="button button-clear" ng-click="myGoBack()" >
    <i class="icon ion-ios-arrow-back"></i>
    Back</button>
 </ion-nav-buttons>

so your html file should like this:

<ion-view view-title="About" >
    <ion-nav-buttons side="left">
    <button class="button button-clear" ng-click="myGoBack()" >
    <i class="icon ion-ios-arrow-back"></i>
    Back</button>
    </ion-nav-buttons>
    <ion-content>
     ...
    </ion-content>
</ion-view>

then in your view controller (you will need to create a controller for app.singer state) add the following function:

$scope.myGoBack = function() {
       $ionicHistory.goBack();
 };

Dont forget to inject $ionicHistory into the controller. Your controller should look something like this:

.controller('AboutCtrl', function($scope, $ionicHistory) {
            $scope.myGoBack = function() {
                $ionicHistory.goBack();
            };
    });

Hope that helps :wink:

1 Like
4

@menelik Thanks a lot for your answer & help. But how can I get the original back button display from ionic? I mean like the original back button that will automatically has different style & display on both iOS and Android.

5

@Yue_Hong I know what you mean. First I tried to implement the ion-nav-back-button as described here: http://ionicframework.com/docs/api/directive/ionNavBackButton/

 <ion-nav-back-button class="button-clear"
    ng-click="myGoBack()">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>

Unfortunately this approach didn’t work for me. The button will not show up. I guess it’s because there is no parent-child history as you’re navigating to a new state outside your tabs.

Maybe some ionic pro’s in forum know another way to do it while keeping the ionic ion-nav-back-button.

6

@Yue_Hong have a look at this forum thread: Back button not showing when coming from nested pages (tabs)

It seams user jdupouy found a working solutions while keeping the original ion-nav-back-button. I will try to use this approach for my own app as well.

Hope that helps :wink: