Why is isOpen for sideMenu always returning false?


#1

Hello, I have the following code in index.html to show a side menu:

<body>

      <!-- This is the Side menu options -->
    <ion-side-menus>
        <ion-side-menu-content>
            <ion-nav-bar class="bar-stable nav-title-slide-ios7">
                <ion-nav-back-button class="button-icon">
                    <span class="icon ion-ios7-arrow-left"></span>
                </ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view></ion-nav-view>
        </ion-side-menu-content>

        <ion-side-menu side="left">
            <ion-header-bar class="bar bar-header bar-dark">
                <h1 class="title">Options</h1>
            </ion-header-bar>
            <ion-content has-header="true">
                <ion-list>

                    <ion-item href="#/montage" menu-close>
                        <span class=" item-icon-left">
                            <i class="icon ion-ios-eye"></i>
                        </span>Montage View
                    </ion-item>

                   <!-- other menu items removed for brevity -->
                    <ion-item nav-clear menu-close href="#/log">
                        <span class=" item-icon-left">
                            <i class="icon ion-clipboard"></i>
                        </span> Logs
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>




    <!--  This is where is bootstrap angular - if I don't do this, then the window jumps around
    after the status bar comes on - because the window kicked in before phonegap got ready -->

    <script>
        window.ionic.Platform.ready(function() {
            console.log("******* PLATFORM READY ****");
            angular.bootstrap(document, ['zmApp']);
        });
    </script>


</body>

Now inside app.js I have the following code to trap the Android back button and display status of side menu:

.run(function ($ionicPlatform, $ionicPopup, $rootScope, zm, $state, ZMDataModel, $cordovaSplashscreen, $http, $interval, zmAutoLogin, $fileLogger,$timeout, $ionicHistory, $window, $ionicSideMenuDelegate)
{
$ionicPlatform.registerBackButtonAction(function (event) {
             $ionicSideMenuDelegate.toggleLeft();
            console.log ("Status of SIDE MENU IS : " + $ionicSideMenuDelegate.isOpen());
        
}, 100);

The trapping works, and each time I press th back button, the menu slide toggles, but the status of isOpen is always FALSE.

This is a problem for me, because I want to exit the app if the status is TRUE - and it never shows as true.

I can’t figure out how to solve this problem. One could think of putting a global variable and toggling but I really don’t like to do that. Plus there are multiple areas in the code where the menu toggles/ My understanding is the SideMenu is a singleton - and I am only using the left part, so I’m confused why this is not working. Any help?

(Updated: I event tried adding a delegate-handle to the menu, and using $ionicSideMenuDelegate.$getByHandle('sideMenu').isOpen() – makes no difference

thx


#2

I would say that problem is in timing.

If you toggle left sidebar, this command (.toggleLeft()) will not wait for a sidebar to open before proceeding further. Thus .isOpen() will always return false; side menu is still not fully opened.

We’re talking about asynchronous process here.


#3

Hello @Gajotres,
I did consider that too, but it does not seem to be the problem. If it really were a timeout issue, then in my code, I am effectively toggling the side menu with each “back” key press. The next time I try, It should show True as the menu was already open and on back press, it would move to false (which takes time to register, if it were a timing issue)

I rewrote the code above as follows

    $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);

That is, it prints the status 1 second after the operation. Still always false.


#4

Are you willing to create a simple Plnkr.co example, you can use for example this one: http://plnkr.co/edit/hYDJL0m6SZUubUVdrdgX?p=info

Just add remove my and add your code and I will try to debug it.


#5

@Gajotres, thank you very much.

Here is what I’ve discovered on further debugging: When you press the menu icon repeatedly the “true” “false” of isOpen works perfectly. However, when you do the same thing inside the handler for android’s back button it seems to be always reporting false, even after toggling.

I’ve written a codepen but not sure how to test it, because if you hit the back button of android, it goes to the previous browser page

EDITED: What seems to be happening with the Android back button is it works for the first time – status moves from ‘False’ to ‘True’ or ‘True’ to ‘False’ but gets stuck there - does not change after the first time


#6

try to move the registriation of the hardware backbutton functionality to a base-controller instead of the run-block


#7

First, thanks – I learned something new about the $controller directive :smile:

Unfortunately, it does not help.
I moved the code to a base controller and injected it in another controller like so

 $controller('zmApp.BaseController', { $scope: $scope });

Then I tried switching between toggle on/off from the view associated with that controller and the results are the same. It works for the first tap and then never works - the android button handler is being called, but the status remains at True