Have a slide menu on a partial

ionic-v1
1

So in my index.html, I have my file structured like so:

<body ng-app="starter">

<nav-bar class="nav-title-slide-ios7" type="bar-positive" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true"></nav-bar>

    <!-- where the initial view template will be rendered -->
    <nav-view animation="slide-left-right"></nav-view>

</body>

But for my partials, one of them has a slide menu and it does not play well with the nav-bar. Basically, I get the slide menu functionality but the nav-bar is not animated. I saw @Calendee poster here about putting the slide menu in index.html but it would server no purpose there.

How would I get to nav-bar to work with a slide menu that is part of a partial?

Here is demo.

2

I had the same problem with Side Menus because I was not putting them outside the nav-view. @xAlien95 helped me fix that problem.

So, yes, with a side menu inside the nav-view, you can’t get the NavBar to slide with it. I’m not sure of a way to resolve it.

Perhaps you could do the side menu outside the nav-view like in my example. Then, have it disabled somehow except for the views that need it? The source code has some mentions about isEnabled , but that is set based on the side="left" type of attribute. Once it’s set, you are done.

3

@Calendee Sounds like that would be the best possible solution. Just can’t figure out how to disable the menu in my controller.

$scope.sideMenuController.left [
  {  isEnabled : false}
];

This returns an error in my console saying

TypeError: Cannot read property 'left' of undefined

Any ideas?
Edit, Also tried this and still got an error

$scope.sideMenuCtrl.left.isEnabled = true;
4

I dabbled with using ng-show on it. This “sort of” works.

Go to the about page. click the button. It toggles a scope variable that is used to allow the side menu to be seen or not.

The problem is that you can still drag the menu open. It’s an ugly hack, but I guess it’s better than nothing.

5

Yeah its not a pretty hack but I guess it works. Would be nice if we could get @Ben or @adam to weigh in on this and give a good method on how to disable the menu and disable the drag programmatically. Or at least point in the right direction

6

Well, I think @Max is probably the best person to ask at this point. I’ll poke him at the office tomorrow and see if he has any ideas. :wink: Thanks, guys!

7

I’m not sure if this fully answers your question, but this demo may help (note: it currently requires the nightly build to work):

8

@mhartington I’ve got a solution for you! It may not be the best way to do this, but it does work without the ugly hack I made before. I got it by digging through @max 's Swipeable Cards demo.

I’ve added a directive called “noDragRight”. The “about” route has the no-drag-right attribute. W/hen on the “about” route, you can’t drag the menu open.

9

Thats Great! It may be a “hack” but its the effect I want. I haven’t dug through the gestures and never used Hammer.js so I do know what the methods are but I’ll use this.

Would be great though if we could dynamically chose to insert a menu like you can with the left and right buttons in a controller…

Thanks @Calendee

10

Hey @Calendee just a heads up, this directive broke since the last time I’ve checked. Any ideas?

11

I just pulled up the Plunker. It seems to be working fine. Where’s it not working for you?

12

Weird, I just tried it in Chrome and it works but for some reason in Safari it doesn’t.

13

You might want to look at this now: How to disable drag in side menu