Tab view + slide menu in first tab doesn't load correctly?

I’m having an issue getting off the ground here with my Ionic app. I have a tabbed view using the following code:

<tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">

    <!-- Stores Tab -->
    <tab title="Stores" icon="icon ion-map" href="#/tab/stores">
        <nav-view name="stores-tab"></nav-view>
    </tab>

    <!-- Drinks Tab -->
    <tab title="Drinks" icon="icon ion-beer" href="#/tab/drinks">
        <nav-view name="drinks-tab"></nav-view>
    </tab>

</tabs>

I’m using the following as my router:

    .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
    })

    .state('tab.stores-index', {
        url: '/stores',
        views: {
            'stores-tab': {
                templateUrl: 'templates/stores/index.html',
                controller: 'StoresIndexCtrl'
            }
        }
    })

    .state('tab.drinks-index', {
        url: '/drinks',
        views: {
            'drinks-tab': {
                templateUrl: 'templates/about.html',
                controller: 'DrinksIndexCtrl'
            }
        }
    })

And this is the view that contains the slide menu:

<side-menus>
    <pane side-menu-content>
        <header class="bar bar-header bar-positive">
            <button class="button button-icon" ng-click="toggleSlide()"><i class="icon ion-navicon"></i></button>
            <h1 class="title">Stores</h1>
        </header>
        <content has-header="true" padding="true">

        </content>
    </pane>
    <side-menu side="left">
        <header class="bar bar-header bar-dark" fade-header>
            <h1 class="title">Filters</h1>
        </header>
        <content has-header="true">
        </content>
    </side-menu>
</side-menus>

For some reason, when the app loads /tab/stores on startup, everything is fine. When I navigate the app to /tab/drinks and attempt to return to /tab/stores the Stores page will not render. I am firing a console.log in the controller for that view and it fires fine, so the application knows it is supposed to be on that route, however the view is never produced.

I’ve never worked with Angular UI Router before so maybe I am doing something wrong here. Any help is appreciated, thanks.

Hmm I think I see the issue now, looks like the headerbar from the partial without the slide menu is remaining when the page switches.

@neilff, I would suggest using a <nav-bar> instead of two <header-bar>s. Did you try that?

do you have any success on that with latest version beta 14 ?

I’m having pretty much the same problem here and just can’t find a solution.
Actually my view content is rendering fine but the menu/scroll control via $ionicSideMenuDelegate doesn’t work.

Basically my test sidemenu tab-view content (given as URL) looks like:

<ion-side-menus>
  <ion-side-menu-content>

    <ion-header-bar class="bar-dark">
      <button class="button button-icon" ng-click="toggleMenu()">
        <i class="icon ion-navicon"></i>
      </button>
      <h1 class="title">Tab with menu</h1>
    </ion-header-bar>

    <ion-content>
      <ion-list>
        <ion-item>
          <h1 style="text-align: left; color: black; line-height: 50px;">Item 1</h1>
        </ion-item>
        <ion-item>
          <h1 style="text-align: left; color: black; line-height: 50px;">Item 2</h1>
        </ion-item>
        <ion-item>
          <h1 style="text-align: left; color: black; line-height: 50px;">Item 3</h1>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Left</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item menu-close>
          Login
        </ion-item>
        <ion-item menu-close>
          Search
        </ion-item>
        <ion-item menu-close>
          Browse
        </ion-item>
        <ion-item menu-close>
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Problem is the $ionicSideMenuDelegate.toggleLeft() function of the tab .controller which doesn’t work anymore if the tab view changed (navigate to another tab and back):

.controller('FirstTabCtrl', function ($scope, $timeout, $ionicSideMenuDelegate, $ionicScrollDelegate) {
  $scope.toggleMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };
});

The toggleMenu() function fires but .toggleLeft() is not working. The menu is not toggling.

I tried to use a sidemenu handle and $ionicSideMenuDelegate.$getByHandle() but upon changing the tab the handle is not found anymore (giving a JS error) - but it’s still in die DOM.

Same for the $ionicScrollDelegate if a scroll list is used as .

If all content code is put in one (index.html) file and no .state templateUrls are used (like in the demo tutorial) all works fine…

For me it’s just looking like a bug. Has anyone solved this basics so far?