In my Ionic app I have two menus, left and right. I want to deactivate the "swipe to open menu" on the right menu, but not on the left.
Here is a simplified version of my code:
<body ng-app="myapp" ng-controller="MainCtrl">
<ion-side-menus>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-list>
<ion-item href="#/detail"><i class="icon ion-heart"></i> Rate App</ion-item>
<ion-item href="#/detail"><i class="icon ion-share"></i> Share App</ion-item>
<ion-item href="#/detail"><i class="icon ion-more"></i> More Apps</ion-item>
<ion-item href="#/detail"><i class="icon ion-android-mail"></i> Contact</ion-item>
</ion-list>
</ion-side-menu>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Title</h1>
<button class="button button-dark" menu-toggle="right">
<i class="ion-android-download"></i> Download App
</button>
</ion-header-bar>
<ion-content>
<!-- Main content -->
</ion-content>
</ion-side-menu-content>
<!-- Right menu -->
<ion-side-menu side="right">
<ion-pane class="right">
<p>Some content in the right menu</p>
</ion-pane>
</ion-side-menu>
</ion-side-menus>
</body>
It's not a proper solution, but it fixes this a little :) It will return the content back to the origin position. For the other side use 275 instead of -275 in compared css matrix value.
$rootScope.$watch(function(){
return $("ion-side-menu-content").css("transform");
}, function(css) {
if(css == "matrix(1, 0, 0, 1, -275, 0)") {
$("ion-side-menu-content").css("transform", "translate3d(0px 0px 0px)");
$("ion-side-menu-content").css("-webkit-transform", "translate3d(0px 0px 0px)");
$("ion-side-menu-content").css("-ms-transform", "translate3d(0px 0px 0px)");
}
});