CODEWITHSUNDEEP
angularjsangular-ui-routerionic-framework
Nighto
Nighto

Reputation: 4212

Ionic app with side-menu and two views with tabs don't switch correctly

In my application with a side menu and several pages. One of those pages, (let's call it Page A) has tabs, everything was working OK - side menu changes the screen with different pages, Page A with tabs had it's tabs working.

Things went south when I tried to add another page with tabs (let's call it Page B). If I am on any page and click on Page A, Page A appears, its tabs works ok. If I click on side menu to open Page B, the URL changes, but nothing happens (Page A is still on screen). All other pages load without problems. If I refresh the browser with Page B URL opened, or refresh on any page other than Page A and then click on Page B side menu link, Page B loads OK, and the reverse happens - any page but Page A will load.

If I comment the code to have tabs on either Page A or Page B, everything works again. So it seems that I can't have an app with side menu and two different pages with different tabs. Is that correct?

Here's my code (relevant parts):

index.html:

<body ng-app="kinofit">
  <ion-nav-view></ion-nav-view>
</body>

app.js:

angular.module('kinofit', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.home', {
    url: "/home",
    views: {
      'menuContent': {
        templateUrl: "templates/home.html",
        controller: 'HomeCtrl'
      }
    }
  })

  .state('app.aerobico', {
    url: "/aerobico",
    views: {
      'menuContent': {
        templateUrl: "templates/aerobico.html",
        controller: 'AerobicoCtrl'
      }
    }
  })

  .state('app.musculacao', {
    url: "/musculacao",
    views: {
      'menuContent': {
        templateUrl: "templates/musculacao.html",
        controller: 'MusculacaoCtrl'
      }
    }
  });

templates/menu.html:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-balanced">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/home">
          <i class="icon ion-home"></i> Início
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/aerobico">
          <i class="icon ion-heart"></i> Aeróbico
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/musculacao">
          <i class="icon ion-checkmark-circled"></i> Musculação
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

templates/musculacao.html:

<ion-view view-title="MUSCULAÇÃO" class="musculacao-view">
  <ion-tabs tabs-type="tabs-icon-top" class="tabs-striped">
    <ion-tab title="Tab 1">
      <ion-content class="tabbed-content-within-sidemenu-app padding">
        (...)
      </ion-content>
    </ion-tab>

    <ion-tab title="Tab 2">
      <ion-content class="tabbed-content-within-sidemenu-app padding">
        (...)
      </ion-content>
    </ion-tab>
  </ion-tabs>
</ion-view>

and templates/aerobico.html is the same, changing the view-title and class attributes.

I'm aware that codepen or similar websites would be better to post the code, but I couldn't make it work with multiple html files.

Any help would be greatly appreciated. Thanks.

Upvotes: 3

Views: 4012

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

Seems like problem related to caching of views, views Caching is by default enable in ionic framework

You need to Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency.(Do add it in config block)

$ionicConfigProvider.views.maxCache(0);

Similar answer here

OP Edit: I couldn't get this to work, but adding cache:false to the $stateProvider call (solution #2 on the "answer here" link above) did the trick for me (OP).

Upvotes: 4

Related Questions