如何检测ionicSideMenu何时打开?

时间:2015-11-19 16:34:17

标签: angularjs mobile ionic-framework ionic ionic-view

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

enter image description here

我正在尝试在离线应用中左侧面板打开时更改标志var。

found this并试图实施它,但变量不会改变而我看不到console.log语句

标记

<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('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);
})

还试过这个:

.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);   
})

2 个答案:

答案 0 :(得分:1)

getOpenRatio工作了! isOpen无效,isOpenLeft对我不起作用。

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

更新:刚刚在我的实际应用中修复它!我有2 ion-side-menus而不是1。

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

答案 1 :(得分:1)

isOpenLeft()正在与我合作。 :)
我使用以下代码检测打开或关闭幻灯片菜单。

$scope.$watch(function () {
       return $ionicSideMenuDelegate.isOpenLeft();
      },
      function (isOpen) {
        if (isOpen){
          console.log("open");
        } else{
          console.log("close");
        }
     });