Side Menu event listener


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


Nmind, figured out my issue


Glad to see you figured this out :smile:


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


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


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) {
            if( ratio == 1){
              alert("menu Open");



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!


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.


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>


Is there a way to do



No, there is no way to set the ratio.