how to override the default back button in ionic

Question

I have three views playlists, playlist, and mediaplayer.

In my project I am getting back button by default. I am debugging an play store app my direction viewing the page is playlists-->playlist-->media player.Also i have separate controller for all there views but i am getting a default back button in playlist and mediaplayer page only.

1).On clicking the back button in playlist page goes to playlists page so there is no problem.

2).On clicking the back button in mediaplayer page goes to playlists page but i need to go to playlist.

here i have some links that i have gone through but i am not able to understand about

Soft navigation bar button - override $rootScope.$ionicGoBack()
Hard Android button - use $ionicPlatform.registerBackButtonAction()

1).Ionic override all BACK button behaviour for specific controller 2).https://github.com/driftyco/ionic/issues/399
3).https://forum.ionicframework.com/t/how-to-handle-a-click-on-the-generated-back-button/582

Please some explain me about overriding the $ionicGoBack(). In my case how to find weather it is Soft navigation bar button or Hard Android button.

When i give inspect element on back button on the page mediaplayer i got this

<button ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item" tabindex="0">
       <i class="icon ion-ios-arrow-back"></i> 
      <span class="back-text" style="transform: translate3d(0px, 0px, 0px);">
      <span class="default-title">Back</span>
      <span class="previous-title hide">Home</span>
     </span></button>

Richard Le Mesurier Richard Le Mesurier · Accepted Answer · 2016-03-23T07:06:17

I will make reference to my answer at

Ionic override all BACK button behaviour for specific controller

It is possible to override both buttons in your controller, without any changes the the HTML code.

To summarise:

Soft navigation bar button - override $rootScope.$ionicGoBack()

Hard Android button - use $ionicPlatform.registerBackButtonAction()

In your case, you want to know if $ionicGoBack() is the soft or hard back button. As explained above, the "Soft navigation bar button" is handled by this method.

The "Hard Android button" is handled by a different method: registerBackButtonAction().

If I understand correctly, you want to override all back behaviour on the Media Player page, and send the user to the Playlist page i.e. you want to go only 1 level back (which would be normal Android behaviour).

This would require overriding both buttons, which is what I explain more about on the link.

I create a new method called doCustomBack(), which is called by both of the overridden handlers. This is the method you want to use to navigate to the Playlist page:

// run this function when either hard or soft back button is pressed
var doCustomBack = function() {
    console.log("custom BACK");
};

The code following that will override the default soft button for you, pointing to the new doCustomBack() method:

// override soft back
// framework calls $rootScope.$ionicGoBack when soft back button is pressed
var oldSoftBack = $rootScope.$ionicGoBack;
$rootScope.$ionicGoBack = function() {
    doCustomBack();
};
var deregisterSoftBack = function() {
    $rootScope.$ionicGoBack = oldSoftBack;
};

The final piece is to override the hard button, also pointing to the same method:

// override hard back
// registerBackButtonAction() returns a function which can be used to deregister it
var deregisterHardBack = $ionicPlatform.registerBackButtonAction(
    doCustomBack, 101
);

The above code blocks also create methods for deregistering your overrides, which means it is simple to remove your changes when you leave the controller:

// cancel custom back behaviour
$scope.$on('$destroy', function() {
    deregisterHardBack();
    deregisterSoftBack();
});

See my original answer for a different explanation, and for more links to related resources.

how to override the default back button in ionic

1 Answers