首页 文章

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

提问于
浏览
3

在我的应用程序中有一个侧面菜单和几个页面 . 其中一个页面(让我们称之为页面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 是相同的,更改视图 Headers 和类属性 .

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

任何帮助将不胜感激 . 谢谢 .

1 回答

  • 4

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

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

    $ionicConfigProvider.views.maxCache(0);
    

    相似answer here

    OP Edit: 我无法让这个工作,但是将 cache:false 添加到 $stateProvider 调用(上面的"answer here"链接上的解决方案#2)对我来说(OP) .

相关问题