Search code examples
angularjsmobileionic-frameworkionic-view

How to detect when ionicSideMenu is open?


http://codepen.io/leongaban/pen/PPLVNY?editors=101

enter image description here

I'm trying to have a flag var change when the left panel is open in an ionic app.

I found this and tried implementing it, but the variable doesn't change and I don't see the console.log statement.

Markup

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Welcome">
    <ion-content class="padding">
      <h1>{{changeMe}}</h1>
      <p>Swipe to the right to reveal the left menu.</p>
      <p>(On desktop click and drag from left to right)</p>
    </ion-content>
  </ion-view>
</script>

Controller

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicPlatform) {
  $scope.changeMe = "This should change if left panel is open"
  $scope.attendees = [
    { firstname: 'Nicolas', lastname: 'Cage' },
    { firstname: 'Jean-Claude', lastname: 'Van Damme' },
    { firstname: 'Keanu', lastname: 'Reeves' },
    { firstname: 'Steven', lastname: 'Seagal' }
  ];

  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };

  $ionicPlatform.registerBackButtonAction(function (event) {
    $ionicSideMenuDelegate.toggleLeft();
    $ionicSideMenuDelegate.$getByHandle('sideMenu').toggleLeft();
    $timeout ( function() {
      $scope.changeMe = "CHANGED! Left panel is open!";
      console.log ("Status of SIDE MENU IS : " + $ionicSideMenuDelegate.$getByHandle('sideMenu').isOpen());
    },1000);   
  }, 100);
})

Also tried this:

.run(function($ionicPlatform, $ionicSideMenuDelegate) {
  $ionicPlatform.registerBackButtonAction(function(e) {
    e.preventDefault();
    if (!$ionicSideMenuDelegate.isOpen()) {
      console.log('isOPEN!');
    }

    if (!$ionicSideMenuDelegate.isOpenLeft()) {
      console.log('OPEN!');
      $ionicSideMenuDelegate.toggleLeft();
    } else {
      console.log('Closed!');
    }
  }, 1000);   
})

Solution

  • getOpenRatio worked! isOpen didn't work and isOpenLeft did not work for me.


    $scope.$watch(function () {
      return $ionicSideMenuDelegate.getOpenRatio();
    },
    function (ratio) {
      if (ratio === 1){
        console.log('ratio is true');
        $scope.isActive= true;
      } else{
        $scope.isActive = false;
        console.log('ratio is false');
      }
    });
    

    UPDATE: Just fixed it in my actual app as well! I had 2 ion-side-menus instead of just 1.

    <ion-side-menus class="ion-home">
        <!-- <ion-side-menus enable-menu-with-back-views="false"> -->