Different Side-Menu views for different Tabs

1

Hi I have three tabs with 3 different main views for center content. I also want to have different side menu options for each tab. I am trying to do this sort of thing in my app.js

.state('tabs.home', {
      url: '/home',
      views: {
      "mainContent": { templateUrl: 'templates/home.html', controller: 'HomeTabCtrl'},
      "sideMenu": { templateUrl: 'templates/home-sidemenu.html', controller: 'HomeSideCtrl'}
      }
    })

But I can’t get it working.

1 Like
2

I have this working like shown. But I don’t think this is the correct way to do this.

Only way I was able to do this , was to have on my index.html

  <ion-nav-bar class="bar-stable nav-title-slide-ios7"></ion-nav-bar>
  <ion-nav-view></ion-nav-view>

and then in the views of one of my tabs I have.

<ion-side-menus ng-controller="DashCtrl">
  <!-- Center content -->
  <ion-side-menu-content >

    <ion-view title="{{slideIndex}}">
<!-- ion nav buttons -->
      <ion-nav-buttons side="left" >
        <a class="button icon-left ion-navicon button-clear button-dark" ng-click="toggleLeft()">
        </a>
      </ion-nav-buttons>

      

      <!-- end of ion nav buttons -->
<!-- slide box -->
      <ion-slide-box on-slide-changed="slideChanged(index)" does-continue="false" delegate-handle="{{collection.id}}" disable-scroll="true" show-pager="false">
        <ion-slide ng-repeat="collection in collections" ng-click="check()">
          <img class="box" src="{{collection.src}}"> 
        </ion-slide>
      </ion-slide-box>
      <!-- end of slide box -->
<!-- end of center content view -->
    </ion-view>
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left" ng-controller="tableContentsCtrl">
    
    <ion-header-bar class="bar bar-header bar-assertive">
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>
          
    <ion-content has-header="true">
      <ion-list scroll="true">
        <ion-item ng-repeat="table in tables" ng-click="goToCurrent(table.id)" item="item"> {{table.title}}</ion-item>
      </ion-list>
    </ion-content>
  
  </ion-side-menu>
</ion-side-menus>

I’m able to have three separate side menu’s for each tab view using this code in each tab template file. I don’t think this is proper way, however. As you can see my center content is the only part moving when toggle side menu and the left button is not moving with it either.

3

Hi Kat

Are you able to have the one SideMenu and simply have the contents or menu items change when you change tabs.
Then a controller for your SideMenu with a smarter click function that can understand the menuitem (and which page it refers) and goto the appropriate content page.
You may have to use rootScope for this

Darren

4

The side menu currently functions as it appears. When I click page 4 it will go to page 4. Then in another tab I have different set of slides with different menu, and it works same. Everything is fine. I just don’t know if the fact the side menu is not behaving as example apps if this is indicator that my structure is incorrect and I need to redo.

5

He ho,

i had the same requirement for one of my apps and used the the same approach as described in the first post.
Here is a little codepen

1 Like