CODEWITHSUNDEEP
angularjsionic-framework
user1361529
user1361529

Reputation: 2697

ionic + android back button + sidemenu isOpen detection - not working reliably

I have an odd situation. I am writing an angular + ionic app with a left slide menu and here is what I am trying to do:

1) Trap the Android back button 2) When you tap the back button, if the menu is not open, take you to the menu (open it) 3) If the menu is open and you hit the back button, exit the app

To trap the back button, I have this code in app.run (also tried relocating to a base controller and injecting it with $controller into other controllers, did not make a difference)

What I am noticing is that if I actually tap the 'menu icon' of the menu, the "isOpen" reliably prints true/false alternately as a I open and close the menu

But, when I tap the Android back button, it works the first time (prints true or false), but every subsequent tap does not change the isOpen state, while the menu actually toggles.

This therefore makes it impossible for me to programmatically detect if the menu is open or close within the android back button handler.

It's confusing me why this is only a problem within the android back handler, and not a problem when I tap the menu item. It's the same code that is called in both cases, which is 

$ionicSideMenuDelegate.toggleLeft();

My Android handler code:

 $ionicPlatform.registerBackButtonAction(function (event) {
             $ionicSideMenuDelegate.toggleLeft();
        $ionicSideMenuDelegate.$getByHandle('sideMenu').toggleLeft();
            $timeout ( function() {
            console.log ("Status of SIDE MENU IS : " + $ionicSideMenuDelegate.$getByHandle('sideMenu').isOpen());
            },1000);

}, 100);

I've also set up a codepen, though not sure how one can test it on and android device, because every time I try and hit the backbutton on a codepen or jsfiddle, it makes the browser go back a page.

Any insight into what is going on? I've asked in the ionic forum, but haven't been able to find out why (yet) --> hence the post to the SO community in the hopes it reaches a wider audience.

Upvotes: 3

Views: 994

Answers (1)

LeftyX
LeftyX

Reputation: 35597

registerBackButtonAction needs a priority to override the other actions:

The priorities for the existing back button hooks are as follows: Return to previous view = 100 Close side menu = 150 Dismiss modal = 200 Close action sheet = 300 Dismiss popup = 400 Dismiss loading overlay = 500

Your back button action will override each of the above actions whose priority is less than the priority you provide. For example, an action assigned a priority of 101 will override the 'return to previous view' action, but not any of the other actions.

I've tested this code and it works as expected:

.run(function($ionicPlatform, $ionicSideMenuDelegate, $ionicPopup) {
        $ionicPlatform.registerBackButtonAction(function(e) {
            e.preventDefault();
            if (!$ionicSideMenuDelegate.isOpenLeft()) {
                $ionicSideMenuDelegate.toggleLeft();
            } else {
                navigator.app.exitApp();
            }
        }, 1000);   
});

As you can see I've used priority 1000 to make sure that I override all the default actions.

I've also used preventDefault(). I don't think you need this but, just in case.

This bit of code only works for the left-side menu as I only check:

$ionicSideMenuDelegate.isOpenLeft()

and only open the left one:

$ionicSideMenuDelegate.toggleLeft()

but you can change it to work with the right menu as well.

UPDATE:

If someone is interested to find out more about Android and Back Button this is the best article I've read so far.

Upvotes: 7

Related Questions