2015-11-19 44 views
1

http://codepen.io/leongaban/pen/PPLVNY?editors=101如何檢測ionicSideMenu何時打開?

enter image description here

我想有一個標誌,無功變化時,左側面板中的離子應用開放

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

回答

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"> --> 
+0

偉大的工作在CodePen,但不是在我的實際應用程序:/ –

1

isOpenLeft()與我一起工作。 :)
我使用下面的代碼來檢測打開或關閉滑動菜單。

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