带有侧边菜单的 Ionic 应用程序和带有选项卡的两个视图无法正确切换

Question

在我的应用程序中有一个侧面菜单和几个页面。其中一个页面（我们称之为页面 A）有标签，一切正常 - 侧边菜单改变了不同页面的屏幕，页面 A 有标签，它的标签工作。

当我尝试添加另一个带有选项卡的页面（我们称之为页面 B）时，事情变得很糟糕。如果我在任何页面上并单击页面 A，将出现页面 A，其选项卡工作正常。如果我单击侧面菜单打开页面 B，URL 会发生变化，但什么也没有发生（页面 A 仍在屏幕上）。所有其他页面加载没有问题。如果我在打开页面 B URL 的情况下刷新浏览器，或者在页面 A 以外的任何页面上刷新，然后单击页面 B 侧边菜单 link，页面 B 加载正常，并且相反的情况发生 - 任何页面但页面 A 会加载。

如果我对代码进行注释以在页面 A 或页面 B 上添加选项卡，一切都会恢复正常。因此，我似乎无法拥有带有侧边菜单的应用程序和带有不同选项卡的两个不同页面。对吗？

这是我的代码（相关部分）：

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>

和templates/aerobico.html是一样的，改变view-title和class属性。

我知道 codepen 或类似网站会更好 post 代码，但我无法让它与多个 html 文件一起使用。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

似乎是与视图缓存相关的问题，视图缓存在离子框架中默认启用

您需要通过将其设置为 0 来禁用所有缓存，然后再使用它添加 $ionicConfigProvider 依赖项。（请将其添加到配置块中）

$ionicConfigProvider.views.maxCache(0);

相似

OP 编辑： 我无法让它工作，但是将 cache:false 添加到 $stateProvider 调用（[= 上的解决方案 #2 24=] link 上面）对我有用（OP）。

带有侧边菜单的 Ionic 应用程序和带有选项卡的两个视图无法正确切换

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

angularjs

angular-ui-router

ionic-framework