Page 1 of 2

How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Fri Dec 18, 2015 1:25 pm
by Mark Wong

I would like the sliding panel not able to show in specific pages.
I tried to bind the variables with panel but that does not work


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Fri Dec 18, 2015 5:56 pm
by Serhii Kulibaba

Hello Mark,

You can enable/disable it in the properties panel of the page.


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Fri Dec 18, 2015 6:22 pm
by Mark Wong

Sorry for not making it clear,
I would like to enable (show) the panel when ng-click : function();
What would be the javascript code for me to achieve that


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Sat Dec 19, 2015 9:53 pm
by Serhii Kulibaba

Please use JS below for that:

pre$ionicSideMenuDelegate = Apperyio.get("$ionicSideMenuDelegate");
$ionicSideMenuDelegate.toggleLeft();/pre

More information about slide panel here: http://ionicframework.com/docs/api/se...


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Sun Dec 20, 2015 8:02 am
by Mark Wong

Sorry, one last thing,
If I want the side menu cannot be toggled in specific pages, e.g. loginPage.

Should I bind the side-menu to a variable in Boolean form? And would you like to give me an example to help me?
Thank you


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Sun Dec 20, 2015 5:29 pm
by Serhii Kulibaba

There are no default mechanism to do that. But you can use workaround:

Add a function to ng-swipe-left/ng-swipe-right attributes for the ng-view on the index.page. Check in that function current page and use "return false;" on pages which shouldn't have slide menu


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Mon Dec 21, 2015 8:21 am
by Mark Wong

Apparently the above method is not working for me :
I set "ng-swipe-right" to "true" of "ng-view" of the index and it doesn't allow swipe.

I have a workaround of using css to block transform of the side-menu

.menu-content{
transform: translate3d(0px, 0px, 0px) !important;
}
Thank you for helping


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Thu Mar 24, 2016 10:08 pm
by Ricardo Amaral

To try to save time:

The CSS .menu-content approach work for web browser but didn't worked at my Android phone.

The ng-swipe-left/ng-swipe-right at ng-view approach always block the swipe for all pages even the parameter is true.

In other hand if you go to the page you want to block the swipe and include ng-swipe-right or ng-swipe-left at page level Attributes, it will block the slide for that specific page. I have that at my logon page.

Thank you!


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Fri Mar 25, 2016 8:06 pm
by Serhii Kulibaba

Hello Ricardo, do you need further assistance? Could you clarify the question?


How can I control the slide panel visibility in Angular JS (Ionic)?

Posted: Fri Mar 25, 2016 8:16 pm
by Ricardo Amaral

That is ok, I could solve that using this: to block the swipe on a specific page, go to desired page and include ng-swipe-right or ng-swipe-left Attribute at page level.

Thank you!