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()
Detailed explanations below.
The solution for overriding the soft navigation bar BACK button comes from understanding what Ionic does when that button is pressed.
From the Ionic docs for ion-nav-back-button, we already know that:
the button is automatically set to
$ionicGoBack()on click/tap.
Searching the source code in ionic.bundle.js reveals how this is declared:
$rootScope.$ionicGoBack = function(backCount) {
$ionicHistory.goBack(backCount);
};
Overriding this in your own controller is simple. Make sure you pass $rootScope into the controller and just modify the above code. It is a good idea to grab a pointer to the original function so you can restore it if required, or call into it when finished with your custom processing.
// grab pointer to original function
var oldSoftBack = $rootScope.$ionicGoBack;
// override default behaviour
$rootScope.$ionicGoBack = function() {
// do something interesting here
// uncomment below line to call old function when finished
// oldSoftBack();
};
The solution for overriding the Android hardware BACK button, for only one controller, comes from the return value of the registerBackButtonAction() function, which does the deregistration of the override.
Call that deregistration method in the $scope.$on('$destroy'... handler.
var doCustomBack= function() {
// do something interesting here
};
// registerBackButtonAction() returns a function which can be used to deregister it
var deregisterHardBack= $ionicPlatform.registerBackButtonAction(
doCustomBack, 101
);
$scope.$on('$destroy', function() {
deregisterHardBack();
});
More details here:
A full solution would require the following:
- override soft navigation bar BACK button
- override Android hard BACK button
- scope would be a single controller
- default behaviour restored
The following code illustrates how this can be done:
// run this function when either hard or soft back button is pressed
var doCustomBack = function() {
console.log("custom BACK");
};
// 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;
};
// override hard back
// registerBackButtonAction() returns a function which can be used to deregister it
var deregisterHardBack = $ionicPlatform.registerBackButtonAction(
doCustomBack, 101
);
// cancel custom back behaviour
$scope.$on('$destroy', function() {
deregisterHardBack();
deregisterSoftBack();
});
This issue has been discussed on the Ionic forums & issues pages: