Closing modal With Android back button

ionic-v1
21

Next issue: I have a slider inside a template. The back button navigates you out of the template. The desired behavior is that the back button backs you up through the slides until the first slide, then out of the template.

This is where I think the use of registerBackButtonAction() will come in.

Is there a way to de-register the function without replacing it with a dummy function? Also, it seems that the registerBackButtonAction() applies to the entire app. I thought that I read somewhere that it could be restricted to the controller.

This may not be the appropriate topic and I should create a new one.

22

If you want to de-register the custom back button action, you would set this up.

 var deregister = $ionicPlatform.registerBackButtonAction(
                function () {
                    console.log("I did something")
                }, 1
        );
        //Then when this scope is destroyed, remove the function
        $scope.$on('$destroy', deregister)
23

My goal is to use the back button to navigate back through the slides until the first slide, then de-register the BackButtonAction (and let the normal back navigation take over). Everything works fine until the first slide, but you have to hit the back button twice for it to work.

I am assuming that the first back is consumed with the de-register action and therefore the second is the actual back under normal navigation.

Therefore, I need to create a second back action within the de-register or somehow allow propagation to occur. Thoughts?

var deregister = $ionicPlatform.registerBackButtonAction(
        function () {
            console.log("registerBackButtonAction");

            if ($ionicSlideBoxDelegate.currentIndex() == 0) {
                console.log("deregister");
                deregister();
            } else {
                console.log("registerBackButtonAction previous");
                $scope.previous();
            }
        }, 100
    );

    // Then when this scope is destroyed, remove the function
    $scope.$on('$destroy', deregister);

    // Slide navigation methods

    $scope.next = function() {
        $ionicSlideBoxDelegate.next();
    };

    $scope.previous = function() {
        $ionicSlideBoxDelegate.previous();
    };
24

This does break my previous solution to close the modal using the following:

scope.$on(’$destroy’, function () {
console.log(“close the popup”);
…
$ionicBackdrop.release();
});

Under normal back navigation, the template is destroyed. With the registerBackButtonAction code, navigation occurs within the slidebox and the directives destroy is not called.

25

Alright, try this.

var deregister = $ionicPlatform.registerBackButtonAction(
        function () {
            console.log("registerBackButtonAction");

            if ($ionicSlideBoxDelegate.currentIndex !== 0) {
                 //If the current slide index doesn't equal 0, 
                 //we'll let the slides go back
                $scope.previous();
            } else {
                //Nothing should be done, so let the default behavior take over
            }
        }, 100
    );

    // Then when this scope is destroyed, remove the function
    $scope.$on('$destroy', deregister);
27

I tried it with no luck. The back portion works fine, but back button doesn’t do anything on the first slide. The “Nothing should be done, so let the default behavior take over” else condition is still intercepting the back event.

The $scope.$on(’$destroy’, deregister); does happen because you can never leave the template.

It seems that the registerBackButtonAction() consumes the action.

28

In your controller where you create modal you can use

        $ionicPlatform.on('backbutton', function() {
            // Execute action
        });
29

I’m having a similar issue but on a Web App… As far as I could analyse, the $IonicPlatform backbutton doesn’t capture anything if it’s a web app.

StateChange start also doesn’t work if there’s nothing in the history stack (closes the app if pressed)

Any ideas on how to enable close of the modal on backbutton press if on a web app ? It’s seems to work fine on the native app…

30

+1. how to handle it in webapp?

31

Have you tried similar to one of the earlier solutions:

  $scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    if ($scope.modal.isShown()) {
      event.preventDefault();
      $scope.modal.remove();
    }
  });
32

For the web app, you can listen for the modal.hidden event and run your own function