Angularjs 带有侧菜单和两个带有选项卡的视图的爱奥尼亚应用程序don';t正确切换
在我的应用程序中,有一个侧菜单和几个页面。其中一个页面(我们称之为A页)有选项卡,一切正常-侧面菜单用不同的页面更改屏幕,A页有选项卡,选项卡正常工作 当我尝试添加另一个带有选项卡的页面时(我们称之为PageB),情况就不一样了。如果我在任何页面上并单击页面A,则会出现页面A,其选项卡工作正常。如果我点击侧菜单打开B页,URL会改变,但什么也不会发生(A页仍然在屏幕上)。加载所有其他页面时不会出现问题。如果我在打开页面B URL的情况下刷新浏览器,或者在页面A以外的任何页面上刷新,然后单击页面B侧的菜单链接,则页面B将加载OK,反之亦然-除了页面A之外的任何页面都将加载 如果我对代码进行注释,使其在A页或B页上都有选项卡,那么一切都会再次正常工作。所以,似乎我不能有一个应用程序与侧菜单和两个不同的页面与不同的标签。对吗 这是我的代码(相关部分):Angularjs 带有侧菜单和两个带有选项卡的视图的爱奥尼亚应用程序don';t正确切换,angularjs,angular-ui-router,ionic-framework,Angularjs,Angular Ui Router,Ionic Framework,在我的应用程序中,有一个侧菜单和几个页面。其中一个页面(我们称之为A页)有选项卡,一切正常-侧面菜单用不同的页面更改屏幕,A页有选项卡,选项卡正常工作 当我尝试添加另一个带有选项卡的页面时(我们称之为PageB),情况就不一样了。如果我在任何页面上并单击页面A,则会出现页面A,其选项卡工作正常。如果我点击侧菜单打开B页,URL会改变,但什么也不会发生(A页仍然在屏幕上)。加载所有其他页面时不会出现问题。如果我在打开页面B URL的情况下刷新浏览器,或者在页面A以外的任何页面上刷新,然后单击页面B
index.html
:
<body ng-app="kinofit">
<ion-nav-view></ion-nav-view>
</body>
<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>
<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>
模板/menu.html
:
<body ng-app="kinofit">
<ion-nav-view></ion-nav-view>
</body>
<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>
<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文件一起工作
任何帮助都将不胜感激。谢谢。看起来像是与视图缓存相关的问题,视图缓存在爱奥尼亚框架中默认启用 您需要通过将其设置为0来禁用所有缓存,然后再使用它添加$ionicConfigProvider依赖项。(在配置块中添加它) 相似的
操作编辑:我无法实现此功能,但将
cache:false
添加到$stateProvider
呼叫(上面“此处回答”链接上的解决方案2)为我实现了此功能(操作)。感谢您的快速回答。当我添加您建议的$ionicConfigProvider
配置时,从A页到B页以及从B页到A页的转换都起作用,但是选项卡之间的导航中断了。在A页上,它在选项卡A1上打开,如果我点击选项卡A2,它将打开,但如果我返回到选项卡A1,页面将变为空白。同样的情况也发生在B页上。@Nighto你看了我作为链接添加的答案了吗?是的。我在1.0.0-rc.2上。这个还没修好,对吧?所以解决方案仍然是降级到1.0.0-beta.13
?最好的方法是什么,只需更改bower.json
,然后运行$bower install
?永远完美的答案!!!为了解决这个问题,我在这两天里竭尽全力。谢谢你@pankajparkar@Nighto真的,这个答案帮助了很多使用ionic
的人。很高兴看到这一点:)