FIXED: Proper way to extend Ionic? (Disable Side menu)

ionic-v1
1

If i wanted to extend the ionic Side Menu, would i want to extend ionic.controllers.SideMenuController or would I want to extend ionic.views.SideMenu?

I need to add a ‘disable’ method or property in such a manner that my login page can restrict the side menu from functioning.

Any guidance is appreciated.

2

Take a look at this : How to disable drag in side menu

<pane side-menu-content drag-content="false">

3

i like the idea but there isn’t an easy way to update this from a child controller. I thought about adding a helper function that the child controller could call but this doesn’t appear to be exposed in JS for me to set it on the sideMenu.

4

I tried this, but no luck, since it doesn’t appear to be a data-binding that forces an update.

angular.element(document.querySelector('#nav-menu-pane')).attr('drag-content', 'false');
5

Was able to fix it using the following code, where the <pane> had an id of #nav-menu-pane

angular.element(document.querySelector('#nav-menu-pane')).scope().dragContent = false;

This was added to a helper function that I called in the needed controllers to disable it. The functions that need it enabled call a helper function that sets it to true:

angular.element(document.querySelector('#nav-menu-pane')).scope().dragContent = true;

A little verbose but does the trick.

6

Hi @corypedia,

I just pushed a fix that makes the directive watch the drag-content attribute.

Now you could do something like this with the nightly build: http://codepen.io/ajoslin/pen/FdLvt

Check out the toggle I added there.

2 Likes
7

You guys rock! Will check it out Monday. Already left work. :stuck_out_tongue:

8

@andytjoslin So maybe I missing something but if I didn’t want to give users an option and just hardcode the ability to drag in my controller would I just add the the attribute :

drag-content="canDragContent"

To my side-menu-content then in my controller set that to false:

$scope.canDragContent = false;

Is this correct or is there more too it because I couldn’t get it to work.

1 Like
9

You could also just put false as the expression.

If it still doesn’t work for you could you post an issue?

Here’s a codepen to play with: http://codepen.io/ajoslin/pen/FdLvt

10

I think we got an issue here. I changed the express to be just false and nothing worked. In my controller I have this.

.controller('PageCtrl', function ($scope) {
    console.log('should set to false');
        $scope.canDragContent = false;
           console.log('false');
})

But I was still able to drag the content. Any thoughts?

11

This solution didn’t really work for me either. The reason being is I need/want to set the ability to drag in a views controller via $scope.sideMenuController.

Would be nice if drag-content was exposed there so it could be set from anywhere.

Side note: @mhartington i couldn’t help but notice the similarities in our avatars, lol

12

Agreed. What I’ve done now is creating multiple views that have their own headers and one that has the side menu setup, but there is a visible transition between the different views. Not optimal but it works until a global feature is created. Seems like a lot of people are wanting to have config features for each directive accessible via their controllers.

Similar to this post

1 Like
13

in my 4th post (5th one of the thread) I found a solution by using this setup. I put it into a helper method i have for my app:

var appHelpers = {
  
  disableNavMenu: function($scope) {
    // disable nav from being draggable
    angular.element(document.querySelector('#nav-menu-pane')).scope().dragContent = false;
  }

};

Then in any controller I just call appHelpers.disableNavMenu($scope);. I was just trying to use that helper to instead change the dragContent that is on the $scope without having to query for it.

14

So I can put this in the controllers where I want to disable the side menu drag and then leave it out when I want to enable it again? Do you have a demo of this?

15

yes thats the way it works. will try to get a demo up.

16

The problem is you have a scope (PageCtrl) that is a child scope of the side-menu-content scope. So if you just set a boolean on the child scope, it won’t get set on the parent scope.

The best way to have something that will properly inherit is:

  1. Put a boolean on rootScope, and set that
  2. Setup a function on the side-menu-content and call that.
17

@mhartington I somewhat mispoke. you do have to ‘reenable’. The overview and reports page allow the menu to be dragged. The admin page does not. here’s an example:
http://embed.plnkr.co/gGqwxVO0BDxcDjiIiJ2h/preview

Going to try and work this in with @andytjoslin’s recommendations.

18

It’s slightly confusing. canDragContent() (called without any parameters) returns the current value of whether we can drag.

!canDragContent() will return the current value, then flip it (since the button in the example toggles whether we can drag).

Then the canDragContent( ) on the outside takes this flipped value and sets it.

19

not sure i understand this snippet…

20

here’s how i did it by setting dragContent instead of querySelector. This would of course assume the controller is a view of your sidemenu:

http://embed.plnkr.co/RpBSpP5TUAt2njqeFjhc/preview