How to handle a click on the generated back button?

ionic-v1
1

When the framework (0.9.20) includes a back button in the navigation bar automatically, how to you define a function to execute when it is clicked? One use case is to present a popup and ask the user about first saving unsaved data.

From the view HTML:

<view title="title" right-buttons="rightButtons">
    <content has-header="true" padding="false">
        ...

From app.js:

        .state('tab.thing-detail', {
        url: '/things/:_id',
        views: {
            'things-tab': {
                templateUrl: 'templates/thing-detail.html',
                controller: 'ThingDetailCtrl'
            }
        }
    })
1 Like
2

Right now there is no functionality to do so, but I think its a good idea. Iā€™ll submit an issue:

3

Hi @adam, I think you should take a look also to my issue #399 :slight_smile:

4

@xAlien95 Sure, I like the idea of adding custom attributes for buttons, but the back button is different than the left buttons. The back button is hidden and shown by Ionicā€™s view service, so we should add a way to hook into that functionality.

1 Like
5

Having the same problem and looking for a workaround at the moment.
Does it trigger an event that can be caught, it looks like itā€™s calling ionicGoBack($event) on ng-click, any chance to hook in there (doesnā€™t matter if i have to edit source)?

Btw, as far as I remember this is pretty similar to prepareForSegue in iOS, and itā€™s used very often. You might wanna look into that. Thereā€™s also unwinding segue, etc, and Iā€™m pretty sure all that functionality is necessary, so itā€™s a good reference I suppose.

6

Ok, got it. Hereā€™s my quick dirty solution:

add

$rootScope.notifyIonicGoingBack();

in here:

 $rootScope.$ionicGoBack = function() {
    $ionicHistory.goBack();
    $rootScope.notifyIonicGoingBack();
  };

(this is at line 42865 in ionic.bundle.js currently, just search for ā€œionicGoBackā€ youā€™ll find it easily)

then in your controller add $rootScope in function parameters and add this function:

$rootScope.notifyIonicGoingBack = function() {
   alert("test ionic going back");
}

Youā€™ll get notified every time ionic goes back.

7

Hey @adam,

Is now a clean solution to attribute a specific method to the generated back button ? I nedd this so hard :smiley:

8

Based on @erayā€™s solution, what I did was just to override $ionicGoBack in one of my controllers. Before doing so, I grabbed a handle to the default implementation - this can be used to call back into on completion of the custom code, or to deregister the custom handler at some point.

I place this code inside one of my controllers:

// override soft back button
// framework calls $rootScope.$ionicGoBack when soft back button is pressed
var oldSoftBack = $rootScope.$ionicGoBack;
$rootScope.$ionicGoBack = function() {
    // implement custom behaviour here
};

My requirement is controller specific, so I deregister the custom handle when the controller exits:

var deregisterSoftBack = function() {
    $rootScope.$ionicGoBack = oldSoftBack;
};

More details can be found on my related StackOverflow post:

2 Likes
10

Thanks it work for me. U r heroā€¦

11

Hi,
I want to use the back button functionality in ionic 2. How do i use this in ionic 2.
can you please share the code ?

12

I have encountered a strange behavior with your solution that either no one else has noticed OR I have implemented it incorrectly. I do admit the latter is probably more likely but for the life of me I canā€™t figure what I may have done wrong.

In short, it seems once I override the back button on any particular tab, the back button on all other tabs or sub-tabs are also overridden. Thus the backbutton on any other Tab takes me back to the the page where it was originally overwritten at. The $scope.$on(ā€™$destroyā€¦) is not restoring the backbutton functionality for the other tabs.

I responded to your original stackoverflow answer as well as posted another related question on stackoverflow. Would appreciate your (or someones) eyes and assistance to figure out whats going on.

My new thread: http://stackoverflow.com/questions/40664271/how-to-restore-ionic-backbutton-after-override-breaking-backbutton-on-other-t

13

Russel, hi, no idea Iā€™m afraid. I havenā€™t worked on the platform in over a year. Hopefully youā€™ll get some luck on that stackoverflow post. Perhaps ask your own question and link to that post to try and get viewers from my post across to yours?

Good luck, Iā€™d be interested to read the outcome if you do get an answer.

Richard

14

Finally figured it out:

The problem was $destroy was not triggering fast enough before the statechange. So moved to this:

  1. change: var oldSoftBack = $rootScope.$ionicGoBack to:

$rootScope.oldSoftBack = $rootScope.$ionicGoBack ;

  1. Instead of $scope.$on('$destroy'...) use this:

var backStateChangeWatcher = $rootScope.$on(ā€˜$stateChangeStartā€™, function () {
if($rootScope.oldSoftBack){
deregisterHardBack();
deregisterSoftBack();
// Un-register watcher
backStateChangeWatcher();
}