Conditionally disable drag to side menu?


#1

I really like the ease of swiping right to open the side menu, but I would like to disable that on just a few of my app’s views. Is there a way to accomplish this? I’ve seen that you can add drag-content to the side menu content pane, but that’s global. I am able to get it to work using a variable on the root scope:

<ion-pane ion-side-menu-content drag-content="sideMenuSwipeEnabled">

And setting that in the controller

$rootScope.sideMenuSwipeEnabled = false;
$scope.$on('$destroy', function() {
  $rootScope.sideMenuSwipeEnabled = true;
});

but that seems like a hack. What would be great would be an attribute on the ion-view or better yet ion-content or even just an individual area of a view.


#2

I think that is no hack.
If you want it without rootScope?
Use angularjs event system.

Do not put this variable on the rootScope instead use the scope of the AppCtrl (your main controller).

The controller that wants to disable dragging could fire an events.

$scope.$emit('setSideMenuDraggable', {draggable: true});

This triggers an event with the name setSideMenuDraggable, which bubbles through the parent scopes.
With $scope.$on you can handle the event in your main controller:

$scope.$on('setSideMenuDraggable', function (event, data) {
  // data.draggable -> set your $scope.sideMenuSwipeEnabled
});

If you want it more generic -> build a directive for that.
you can add it to a dom node -> pass a $scope.variable to the directive where you set the dragging behavior.
The directive has a watcher on this variable -> if the value changes the directive fires the event.

So you only have one position where you can change the event.

Greets, bengtler.