States declare own right side menu while left menu is always present

Question

My left side menu needs to persists across all states, but each state can optionally have a right side menu with whatever content that state chooses. For now, I've implemented this by making the content of the left side menu a directive of it's own that each state has to include. It's not very DRY and the left side menu is reloaded across states. It works, but it's not ideal.

The following approach is intuitive, but doesn't work because the right side-menu is nested in the ion-nav-view instead of being a direct child of ion-side-menus.

ion-side-menus
  ion-side-menu-content
    ion-nav-view // states want to include their own right side menu
  ion-side-menu(side="left")
    main-nav

// some-state.jade
some-directive
ion-side-menu(side="right") // side menu is broken because it's nested

If the right side menu is a direct child of ion-nav-view, is there a way for a state to decide what content is in it?

ion-side-menus
  ion-side-menu-content
    ion-nav-view
  ion-side-menu(side="right")
    // side menu content here according to current state...
  ion-side-menu(side="left")
    main-nav

I'm not familiar with ionic, but it seems to be using ui.router. With ui.router you should be able to define different named views and define what they are for each state. github.com/angular-ui/ui-router/wiki/Multiple-Named-Views — New Dev
@NewDev I think you're right that it could let each state declare a named view that would go into the right menu.. then I'd just have to pick a way of removing the right menu when a state doesn't want it. Maybe a slightly hacky ng-if would be ok. — m59
I would think that not having that named view for a state would remove it. Is that not what happens? — New Dev
@NewDev The structure (nesting) of the side menus has to be preserved as is in my last code sample. There would just be a ui-view where that comment is, and it would come and go according to the state, but the side-menu would still be there. It would be nice if I could just nest the side-menu in a ui-view, but not being able to is exactly the problem. I could have states that need it set a property on $rootScope and then check that property like ng-if="rightMenu". — m59
I don't think I fully follow, to be honest. Is <ion-nav-view> where the states render their default view? What is <ion-side-menu>? You say "right side menu is nested in the ion-nav-view" but I don't see how in your HTML (and if you don't mind converting to normal HTML from jade, it would help - not everyone is familiar with jade) — New Dev

New Dev New Dev · Accepted Answer · 2015-05-10T06:37:01

Perhaps, I'm not fully understanding the crux of the question - and if so, I will delete this answer. But, as it seems to me, the approach that you find intuitive is actually counter-intuitive.

The intuitive approach in my mind (which coincides with how ui.router uses named views) is to define the structure of the app first, then define the views that each state would populate.

I am not familiar with ionic, so here's a conceptual example without it:

<div>
  <div class="menu">
    <div class="left">
      left menu: same content for entire app
    </div>

    <div class="right">
      right menu
      <div ui-view="rightside">
    </div>
  </div>

  <!-- main content -->
  <div class="content" ui-view>
  </div>
</div>

Then, each state can populate the "rightside" view:

.state("stateA", {
  views: {
    "": {
      template: "content of stateA"
    },
    "rightside": {
      template: "menu of stateA"
    }
  }
})
.state("stateB", {
  abstract: true,
  template: "<div ui-view></div>"
})
.state("stateB.B1", {
  views: {
    "": {
      template: "content of stateB.B1"
    },
    "rightside@": {
      template: "menu of stateB.B1"
    }
  }
})

Both stateA and stateB.B1 would populate the "rightside" view when they load.

States declare own right side menu while left menu is always present

1 Answers