How to disable side menu when sliding over a div?


Many thanks again Mr. @Calendee
I’m Very sorry for this inconvenience
when I applied your way, I was able to disable drag content on all page within ion-nav-bar
and then I tried to give ion-nav-bar a specific controller and apply

$scope.$root.canDrag = true;

on it, but it doesn’t work.
still can’t drag content from ion-nav-bar only…

What is the reason ?? Can I apply drag content on ion-nav-bar and disable it on the rest of my page ??


I think you’ll need to setup a CodePen sample. It’s pretty hard to troubleshoot it without something to work with. Fork my sample, modify it with your changes, and let me know.


this Codepen

I need to disable Drag Content in all Page1 and all Page2 {{ EXCEPT on “Nav Bar” or ion-nav-bar within each page}} and swipe between them

In other words: if the user try to drag side menu when he is on the Nav Bar, he can do this,
but if he try to drag side menu when he is on the rest of the page, he can’t


Ah… I see what you mean. Out of the box, I don’t think Ionic supports ability to allow drag to open depending on what you’re dragging.

I’ve put together a sample that can make this work. It’s not perfect and could use some fine tuning.

On page 2 where side menu content is disabled, you can swipe on the Navbar to get the sidemenu to open. The directive for this is navBarSwipe. navBarSwipe uses the swipe gesture because it’s pretty smooth. I’ve commented out the drag gesture. You could change the directive to use the drag. However, it’s a bit glitchy. You’d need to spend some time fine tuning it - maybe with a debounce or distance detection.


Thank you very very much, you are great ! :smile:
I felt very happy when I saw CodePen example, but unfortunately it doesn’t work in my app :frowning:
I am sorry but I could not understand this sentence
What do you mean in it ??

“Swiped!” is printed every time I swipe the menu, but it doesn’t moved or swiped

English isn’t my native ^^!


I’m not sure what trouble you’re having. Here’s a GIF that shows “swiping” the nav-bar works on Page 2.


Yup, I’ve seen it, but don’t know why it doesn’t working in my app !

Thanks again :slight_smile:


You’ll need to post your code in order for us to help. Right now, it’s ipossible to say what’s wrong your real sample.


Thank you very much @Calendee
I’ve resolved the problem :slight_smile:
I added new controller in in index page and added it to the controller.js file
In this controller I added toggleLeft Function :slight_smile:


I was using the “$scope.$root.canDrag = true;” approach but then I found that this looks to be a cleaner way of handling it.



Thought I would go ahead and share this as well.

I do this in my app.js so that other views are able to drag the side menu.

.run(function($rootScope, $ionicPlatform, $ionicSideMenuDelegate) {
  $rootScope.$on('$stateChangeSuccess', function () {
    // By default, we want to allow the side-menu to be dragged. 
    // Some views may need to disable it so we want to enable it 
    // after a successful state change


@Calendee I am having this same requirement. What’s you take rather than adding $root.canDrag we can have check in .run()

if( == "sidebar.productdetail") {
} else {

This we we dont have to set drag in each controller ! What’s your take on this method ?


If it works, go for it. Perhaps you’d be better putting it in a $stateChangeStart event listener in .run.


Mr @Calendee I’m very sorry, but when I update ionic to nightly version everything in the app corrupted !!!
this error appears :
[$compile:multidir] Multiple directives [ionNavBar, navBarSwipe] asking
for new/isolated scope on:

and if you want … here I just change

<script src="//"></script>


<script src="//"></script>


The nightlies have extensive breaking changes. You’re going to need to pick through them to grasp all of the differences.

See the list here : Please help test: Angular 1.3, improved transitions, cached views, etc

Also, note that the nightlies downloads have a changelog.html that explains things as well.


Yep, I know that, and I spent a lot of time yesterday to check error :fearful:
In this example … when I delete ‘navBarSwip’ directive it works… But not as I want …
because the error is: Multiple directives [ionNavBar, navBarSwipe]


In beta14, this is broken by the way. Just in case someone else is trying to get this to work with the latest release


(Possible*) Fix here:


Thanks @gx14, too much time trying and failing. Please, it has to be merged


Thank you, is working to me!