离子与应用侧面菜单和标签不正确地切换两种观点 [英] Ionic app with side-menu and two views with tabs don't switch correctly

查看:168
本文介绍了离子与应用侧面菜单和标签不正确地切换两种观点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的侧面菜单和几个网页应用程序。其中一个网页,(我们称之为页A)的标签,一切工作正常 - 侧面菜单更改与不同的网页画面,使用标签页A有它的工作标签页

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.

事情南下,当我试图用标签添加另一个页面(我们称之为页B)。如果我的页面上,点击网页A,网页A显示,其标签工程确定。如果我身边菜单上点击打开网页B时,网址的变化,但没有任何反应(页仍然是在屏幕上)。所有其他网页加载没有问题。如果我刷新浏览器与网页B的URL打开或刷新其它页不是第一个,然后点击页面B面菜单链接,网页B的负载确定,相反的情况 - 所有的页面,但第一个将加载

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.

如果我评论了code会对无论是页面A或B页标签,一切都再次工作。这样看来,我不能有侧面菜单,并与不同的标签两个不同的网页应用程序。这是否正确?

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?

下面是我的code(相关部分):

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'
      }
    }
  });

模板/ 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>

模板/ 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>

模板/ aerobico.html 是一样的,更改视图标题和class属性。

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

我知道,codePEN或类似网站会更好张贴code,但我不能使它与多个HTML文件。

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.

任何帮助将大大AP preciated。谢谢你。

Any help would be greatly appreciated. Thanks.

推荐答案

好像涉及到的意见缓存的问题,意见缓存默认情况下,在离子框架允许

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

您需要将其设置为0,使用它添加$ ionicConfigProvider依赖之前,禁用所有缓存。(不要添加它配置块)

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);

回答这里

OP编辑:我无法得到这个工作,但添加缓存:假 $ stateProvider 调用(上面的回答这里链接的解决方案#2)的伎俩,我(OP)。

OP 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).

这篇关于离子与应用侧面菜单和标签不正确地切换两种观点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆