Question

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

当我尝试使用标签添加另一个页面时，事情就变成了南方（我们称之为Page B）。如果我在任何页面上并单击页面A，则显示页面A，其选项卡正常。如果我单击侧面菜单打开页面B，URL会更改，但没有任何反应（页面A仍在屏幕上）。所有其他页面加载没有问题。如果我在打开页面B URL的情况下刷新浏览器，或者在页面A以外的任何页面上刷新，然后单击页面B侧面菜单链接，则页面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相同，更改了视图标题和类属性。

我知道codepen或类似网站会更好地发布代码，但我无法使用多个html文件。

非常感谢任何帮助。感谢。

Answer 1

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

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

$ionicConfigProvider.views.maxCache(0);

类似answer here

OP编辑：我无法使其发挥作用，但在cache:false电话中添加了$stateProvider（＃34上的解决方案＃2;答案这里＆＃34;上面的链接）为我做了伎俩（OP）。

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

1 个答案: