http://codepen.io/leongaban/pen/PPLVNY?editors=101
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);
})
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"> -->