Side Menu event listener


#1

What would be the best way to listen for $ionicSideMenuDelegate.isOpen()?


#2

Nmind, figured out my issue


#3

Glad to see you figured this out :smile:


#4

Well, don’t leave us in the dark! Share your solution!


#5

I have the same issue here. I’ve seen the code and no events are triggered, since I guess it is a css transition. So the solution should be to listen for the “transitionEnd” css event. I would be very grateful if someone found a solution and could provide an example. Thanks


#6

A good example I’ve used is using the .getOpenRatio() inside of a directive.

.directive('watchMenu', function($timeout, $ionicSideMenuDelegate) {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      // Run in the next scope digest
      $timeout(function() {
        // Watch for changes to the openRatio which is a value between 0 and 1 that says how "open" the side menu is
       
        $scope.$watch(function() { 
          return $ionicSideMenuDelegate.getOpenRatio();
        }, 
          function(ratio) {
            $scope.data=ratio;
            if( ratio == 1){
              alert("menu Open");
            }else{}

          });
      });
    }
  };
});

#7

The solution works great, is there any way to implement it to restrict the event handler to listen to only 1 side of the menu? E.g. I just want the right menu to listen for the event?

Any help will be appreciated! Thank you in advance!


#8

I did a workaround for it. I’ve used an event listener to find out if the side menu is being opened(setting a boolean to true after toggling the side menu to open). And when I close the menu, it will check if the boolean is true, if it is… it will execute a set of logics and set it back to false.


#9

You can expose the menu state on the scope by putting this in the controller:

$scope.isMenuOpen = $ionicSideMenuDelegate.isOpen.bind($ionicSideMenuDelegate);

Then in the template:

<div ng-if="isMenuOpen()">Open</div>

#10

Is there a way to do

setOpenRatio()


#11

No, there is no way to set the ratio.