Menu-toggle only works for left menu?

ionic-v1
1

My app has a left side menu and a right side menu. in my view, I can toggle the left menu with a left nav button:

<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>

However, I can’t make the right menu work by this:

<ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-gear-b"></button>
</ion-nav-buttons>

it still toggle the left menu. Finally, I make it work by doing this:

<ion-nav-buttons side="right">
    <button class="button button-icon icon ion-gear-b" ng-click="toggleRight()"></button>
</ion-nav-buttons>

And:

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

Does any one has the same problem?

2

Can you create a CodePen of your issue? And perhaps post it to GitHub issues

3

i have the same problem yes. your solution is good but i think it should be done on the directive level out of ionic.

4

Same here. Only works for left pane. Here is the codepen :wink:

Workaround is to toggle right pane manually

5

Same issue … looks like a bug ?

6

Hi, I checked the source code of the directive and found that it does a $scope.$eval() with the value of the menu-toggle attr.
So, what you should put there is an angular expression.

Either of:

<button menu-toggle="'left'" class="button button-icon icon ion-navicon"></button>

or

<button menu-toggle="'right'" class="button button-icon icon ion-navicon"></button>
2 Likes
7

Thank you, ssassi.
So I think the document should be updated:
http://ionicframework.com/docs/api/directive/menuToggle/

8

Thank you for this solution. I was slowly going insane trying to figure this out. :smile:

9

This problem has been fixed in the nightly build version. now it can work fine like this:

        <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>

        <ion-nav-buttons side="right">
            <button menu-toggle="right" class="button button-icon icon ion-gear-b"></button>
        </ion-nav-buttons>

in beta1, you need to do this:

menu-toggle="'right'"