Contextual side menu

ionic-v1
1

I am using ionic v1.0.0-beta.1 “actinium” and following the “ionic start myApp sidemenu” example on the getting started page. I am having trouble implementing a contextual side menu based on which state I transition to. For example, when on a ‘app.todos’ state I would like the side menu to show something like:

<ion-list>            
    <ion-item ng-if="currentPath === '/app/mycustomers'" class="item item-icon-left" nav-clear menu-close href="#/app/mycustomers">
        <i class="icon ion-person-stalker"></i>
        My Customers
    </ion-item>
    <ion-item class="item item-icon-left" nav-clear menu-close href="#/app/todos">
        <i class="icon ion-clipboard"></i>
        Todos
    </ion-item>
    <ion-item class="item item-icon-left" nav-clear menu-close href="#/app/logout">
        <i class="icon ion-log-out"></i>
        Logout
    </ion-item>
  </ion-list>

And then on on a ‘app.customers’ state, a list with additional items:

<ion-list>
      <ion-item ng-if="currentPath === '/app/mycustomers'" class="item item-icon-left" nav-clear menu-close href="#/app/searchbycustomer">
          <i class="icon ion-person-stalker"></i>
          Search By Customer
      </ion-item>
      <ion-item class="item item-icon-left" nav-clear menu-close href="#/app/searchbydate">
          <i class="icon ion-person-stalker"></i>
          Search by Date
      </ion-item>
    <ion-item ng-if="currentPath === '/app/mycustomers'" class="item item-icon-left" nav-clear menu-close href="#/app/mycustomers">
        <i class="icon ion-person-stalker"></i>
        My Customers
    </ion-item>
        <ion-item class="item item-icon-left" nav-clear menu-close href="#/app/mycustomers">
        <i class="icon ion-person-stalker"></i>
        My Customers
    </ion-item>
    <ion-item class="item item-icon-left" nav-clear menu-close href="#/app/todos">
        <i class="icon ion-clipboard"></i>
        Todos
    </ion-item>
    <ion-item class="item item-icon-left" nav-clear menu-close href="#/app/logout">
        <i class="icon ion-log-out"></i>
        Logout
    </ion-item>
  </ion-list>

I added a currentPath to my settings controller:

var currentPath = $location.$$path;

But it seems like the menuController isn’t instantiated when transitioning to a new view so the path never updates. Any ideas how to implement this?
Thanks in advance!

2

Consider using $scope.$on('stateChangeSuccess, .....') in your controller and then updating the ng-if based on something you detect there.

3

Thanks, I’ll give it a shot and let ya know what I find.

4

So the issue seems to be the order in which the page loads, in this instance the side menu UI is not being updated on transition to a new state. When I force reload the view it will recognize the ng-if statement. Thoughts?

5

Hi,

I am too facing a similar problem. Were you able to find a solution for the issue? A workaround of some sort that was sufficient?

6

Off the top of my head, I don’t understand why that wouldn’t work.
Can you post a CodePen sample? I can dabble with it then.

7

Hey there, sorry I haven’t had a chance to post before now.
So I was never able to get the sideMenu to update the ui, however I did follow Calendee’s lead and use the events fired when a new state is transitioned to, for example:

$scope.$on('$stateChangeSuccess', function(){ angular.element($document[0].querySelector(".contextMenu")).addClass('open'); }); $scope.$on('$stateChangeStart', function(){ angular.element($document[0].querySelector(".contextMenu")).removeClass('open'); });

I’m simply showing and hiding the divs with css, if you use a css transition you will meed to time the transition with the closing of them menu. I used

div.contextMenu {opacity: 0;height: 0;-webkit-transition-delay: 0.5s;}

and

div.contextMenu.open {opacity: 1;height: 205px;}

This works for now until I can get the ui to update.

Good luck!

8

As a side note, I don’t think you need opacity per se, but I’m trying to cover the bases. :slight_smile:

9

I wouldn’t use CSS to show and hide the divs. You really shouldn’t use a controller to directly update the DOM.

The best thing to do is put ng-if``,ng-show, orng-hide` on the DOM elements with a boolean expression. Then, change those states in the controller.

10

I agree, but setting a boolean with ‘stateChangeSuccess’ was having no effect for me and simply was not updating the dom. The only other solution I found was forcing a reload on the view and that seemed like more of a hack and also changed the transition effect.

11

My suspicion is that your currentPath is not getting 2-way binding. This is generally because it’s a primitive and you need to use “dot notation”.

In your controller, I’d do something like this :

$scope.data = {
  currentPath : .....
};

Then, in the HTML :

<ion-item ng-if="data.currentPath === '/app/mycustomers'" class="item item-icon-left" nav-clear menu-close href="#/app/mycustomers">
12

Great I’ll give it a shot, thanks for the help!