Make SideMenu behave like Tabs

ionic-v1
1

I’m having a hard time using the SideMenu with the $stateProvider.

In your demo it transitions between each SideMenu-Item (adding a back button to each view), but that should not happen. Each SideMenu-Item should have it’s own view and history, just like the tabs directive.

This is what I am currently doing: http://www.geekgirl.io/ionic-side-menu-navigation-app/

I’m using $routeProvider for each page. But now, there is no transition between sub-pages (animate=“slide-left-right”) like going from /#/user to /#/user/tom. But here I want the transition to happen.

Is there a fast/easy solution for this? Cause I’m really stuck here.

2

Hey @mrtnbroder, first of all, you’ll need to use $stateProvider instead (ui-router). We moved away from ngRoute right around the time that blog post was written it looks like. More docs on that here: http://ionicframework.com/docs/angularjs/controllers/view-state/

I would suggest putting the nav-view inside the side menu content, then following the routing guide in the seed project to make sure each side menu item uses a separate routing stack: https://github.com/driftyco/ionic-angular-cordova-seed/blob/master/www/js/app.js

Does that help at all?

1 Like
3

hey @max,
thanks for the reply.

Unfortunately, this doesn’t help. My index.html already looks like that. How do I make it that each side menu item got it’s own stack? I don’t get it.

index.html

      <!-- The nav bar that will be updated as we navigate -->
      <nav-bar animation="nav-title-slide-ios7"
           type="bar-light"
           align-title="center"
           back-button-type="button-icon"
           back-button-icon="ion-arrow-left-c"></nav-bar>

      <!-- where the content of each page will be rendered -->
      <nav-view></nav-view>
    </pane>

    <!-- Left Side Menu -->
    <side-menu side="left">

      <header class="bar bar-header bar-positive">
        <h1 class="title">Menu</h1>
      </header>

      <content has-header="true">
        <ul class="list">
          <a href="{{item.link}}" ng-click="toggleLeft()" class="item item-icon-left" ng-repeat="item in list">
            <i class='icon' ng-class="item.iconClass"></i>
            {{item.text}}
          </a>
        </ul>
      </content>
    </side-menu>

  </side-menus>
</div>

app.coffee

# Ionic Starter App, v0.9.20

sideMenuApp = angular.module "starter", [
  "ionic"
]

sideMenuApp.config ($stateProvider, $urlRouterProvider) ->
  $stateProvider
    .state( "news",
      url: '/news'
      controller: "NewsCtrl"
      templateUrl: "templates/news.html"
    )
    .state( "events",
      url: '/events'
      controller: "EventsCtrl"
      templateUrl: "templates/events.html"
    )
    .state( "contacts",
      url: '/contacts'
      controller: "ContactsCtrl"
      templateUrl: "templates/contacts.html"
    )
    .state("contacts.detail",
      url: '/:id'
      views:
        "@":
          controller: "ContactsDetailCtrl"
          templateUrl: "templates/contacts.detail.html"
    )
    .state( "about",
      url: '/about'
      controller: "AboutCtrl"
      templateUrl: "templates/about.html"
    )

each view looks like this:

<view hide-back-button='false' animation="slide-left-right" title="'Hello!'">
    <content padding="true" has-header="true">
        <h2>Hi!</h2>
    </content>
</view>
4

Any news about this problem ?
I would be interested too, I want all my menu-items to have their own history stack (like the ion-tab directive)

I’d like to have something like that :

<ion-side-menu-content>
<!-- Navbar -->
<ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-icon button-clear ion-ios7-arrow-back"></ion-nav-back-button>
</ion-nav-bar>

<!-- Left button -->
<ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>

<!-- Analyses section -->
<ion-side-menu-item title="Analyses" icon="icon ion-beaker" href="#/tab/analyses">
    <ion-nav-view name="analyses-content"></ion-nav-view>
</ion-side-menu-item>

<!-- Documents section -->
<ion-side-menu-item title="Documents" icon="icon ion-document-text" href="#/tab/documents">
    <ion-nav-view name="documents-content"></ion-nav-view>
</ion-side-menu-item>

<!-- Synchronization section -->
<ion-side-menu-item title="Synchronization" icon="icon ion-loop" href="#/tab/synchronization">
    <ion-nav-view name="synchronization-content"></ion-nav-view>
</ion-side-menu-item>

What do you think ?

EDIT : We could also make a directive to define a link as root :

<a href="#/analyses" ion-history-root>Analyses</a>

It means that this link should starts its own history stack. I understand that’s not easy to implement. :stuck_out_tongue:

5

It’s quite easy, actually.

The only thing the ion-tabs directive do for navigation is listening for ui-router’s $stateChangeSuccess event and loads the appropriate tab and history into the view. This means you can change the state wherever you see fit (for example in your side menu) either using $state.go( “somewhere” ) or by changing the url using href.

To remove the tabs bar from the bottom of the screen, simply add display:none to the .tabs class.

6

Thanks for your answer.
Actually I sorted this out by using a hidden tab bar : Side menu behaves like tabs

7

Actually, I was wrong in my comment above. To keep track of history within the views you need to add the following code to the ionTabNav directive’s compile function:

    $scope.$on( "tab.select", function(event, tab) {
      if($scope.title === tab) {
        $scope.selectTab(event);
      }
    });

Instead of using $state.go() you do…

    $rootScope.$broadcast( "tab.select", titleOfTab );

…anywhere in your app to switch tab.