Menu items as tab items


#1

I’d see menu items behaving as tab items regarding the way history is stored and managed. For example, given two menu items:

  • calendar/:day

  • info
    Moving from calendar view to info works fine, going back fails because the new url is without the ‘day’ parameter (and a new calendar view is created). Mind that I would achieve this without clicking on the ‘back button’ because I’ve several menu items.

    App

      <ion-content  class="has-header">
          <ion-list>
            <ion-item menu-toggle item-type="item-icon-left" ui-sref-active="active" ui-sref="tab.calendar">
              <i class="icon ion-calendar"></i>
              Calendar
              <i class="icon ion-ios-arrow-right"></i>
            </ion-item>
            <ion-item menu-toggle item-type="item-icon-left" ui-sref-active="active" ui-sref="tab.info">
              <i class="icon ion-ios-information"></i>
              Info
              <i class="icon ion-ios-arrow-right"></i>            
            </ion-item>                
            </ion-item>
          </ion-list>
      </ion-content>
    </ion-side-menu>
    
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button>
            </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>
    

app.js

$stateProvider
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/menu_tabs.html',
  })
  .state('tab.calendar', {
    url: '/calendar/:day',
    templateUrl: 'templates/calendar.html',
    controller: 'CalendarCtrl'
  })
  .state('tab.info', {
    url: '/info',
    templateUrl: 'templates/tab-info.html',
    controller: 'InfoCtrl'      
  })

#2

can you share the code on codepen . and be more elaborate.


#3

The issue regards the fact that parameters are not passed to the controller when going back to the former view, as a result a new view is instantiated instead of using the former one. I fixed it as follows

  $scope.jump = function(state) {
    var stateParams={};
    var current = $ionicHistory.viewHistory().currentView;
    var stack = $ionicHistory.viewHistory().histories[current.historyId].stack;
    var e = $filter('filter')(stack, function(value, index, array){
      return value.stateName === state;
    });
    if (e.length !== 0){
      stateParams = e[e.length - 1].stateParams;
    }
    $state.go(state, stateParams);
 };

Any ion-item in the menu has the ‘ng-click=“jump(‘tab.calendar’)”’ attribute.