我正在尝试使用 ionic 制作一个混合应用程序，其结构如下所示:
#/app (sidemenu.html)
#/app/noTabContent1 (notab-content1.html)
#/app/noTabContent2 (notab-content2.html)
#/app/tab1 (tab1.html)
#/app/tab1/content1 (tab1-content1.html)
#/app/tab1/content2 (tab1-content2.html)
#/app/tab2 (tab2.html)
#/app/tab2/content1 (tab2-content1.html)
#/app/tab2/content2 (tab2-content2.html)
问题是，标签页之间似乎有冲突。例如，如果我首先访问 tab1 内容页面，然后再访问 tab2 内容页面，它仍然会显示 tab1 内容。如果我首先访问 tab2 内容页面，则无论我如何尝试访问 tab1 内容页面，它都将始终显示 tab2 内容。
为什么会这样？我的结构错误吗？或者，它是 ionic 虫？我该如何克服它？
编辑:这是我的示例代码，以便于理解:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- ionic/angularjs js -->
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<!-- your app's js -->
<!--<script src="js/app.js"></script>
<script src="js/controllers.js"></script>-->
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<!-- MENU Template -->
<script id="templates/menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<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-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/content1">
Content 1
</ion-item>
<ion-item menu-close href="#/app/content2">
Content 2
</ion-item>
<ion-item menu-close href="#/app/tab/content1">
Tab 1 Content 1
</ion-item>
<ion-item menu-close href="#/app/tab/content2">
Tab 1 Content 2
</ion-item>
<ion-item menu-close href="#/app/tab2/content1">
Tab 2 Content 1
</ion-item>
<ion-item menu-close href="#/app/tab2/content2">
Tab 2 Content 2
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<!-- Tab1 Template -->
<script id="templates/tab1.html" type="text/ng-template">
<ion-tabs class="tabs-top tabs-color-active-positive">
<ion-tab title="Tab1 - Content1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/tab/content1">
<ion-nav-view name="tab-Content"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab1 - Content2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/tab/content2">
<ion-nav-view name="tab-Content2"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<!-- Tab2 Template -->
<script id="templates/tab2.html" type="text/ng-template">
<ion-tabs class="tabs-top tabs-color-active-positive">
<ion-tab title="Tab2 - Content1" href="#/app/tab2/content1">
<ion-nav-view name="tab2-Content"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab2 - Content2" href="#/app/tab2/content2">
<ion-nav-view name="tab2-Content2"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<!-- Content1 Template -->
<script id="templates/content1.html" type="text/ng-template">
<ion-view view-title="Content 1">
<ion-content>
<h1>Content 1</h1>
</ion-content>
</ion-view>
</script>
<!-- Content2 Template -->
<script id="templates/content2.html" type="text/ng-template">
<ion-view view-title="Content 2">
<ion-content>
<h1>Content 2</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
//controller: 'AppCtrl'
})
.state('app.tab', {
url: '/tab',
views:{
'menuContent':{
templateUrl: 'templates/tab1.html'
}
}
})
.state('app.tab2', {
url: '/tab2',
views:{
'menuContent':{
templateUrl: 'templates/tab2.html'
}
}
})
.state('app.content1', {
url: '/content1',
views: {
'menuContent': {
templateUrl: 'templates/content1.html'
}
}
})
.state('app.content2', {
url: '/content2',
views: {
'menuContent': {
templateUrl: 'templates/content2.html'
}
}
})
.state('app.tab.content1', {
url: '/content1',
views: {
'tab-Content': {
templateUrl: 'templates/content1.html'
}
}
})
.state('app.tab.content2', {
url: '/content2',
views: {
'tab-Content2': {
templateUrl: 'templates/content2.html'
}
}
})
.state('app.tab2.content1', {
url: '/content1',
views: {
'tab2-Content': {
templateUrl: 'templates/content1.html'
}
}
})
.state('app.tab2.content2', {
url: '/content2',
views: {
'tab2-Content2': {
templateUrl: 'templates/content2.html'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/content1');
});
最佳答案
欢迎来到神秘的 ionic 导航世界。 我想没有人曾经掌握过这个奇怪的野兽，并且希望有人在某个时候能够修复它……或者更好的是重写它。
Loads的questions已在论坛中被问及此主题以及更多其他内容；关于这个主题的问题一直存在，悬而未决，但没有明确的答案。
奇怪的是，连创作者都没有得到适当的解释，也没有意愿回答这些问题。
无论如何，回到你的问题。使其工作的唯一方法是禁用缓存系统。
缓存
By default, views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached, its scope is then reconnected, and the existing element that was left in the DOM becomes the active view. This also allows for the scroll position of previous views to be maintained.
Caching can be disabled and enabled in multiple ways. By default, Ionic will cache a maximum of 10 views, and not only can this be configured, but apps can also explicitly state which views should and should not be cached.
Note that because we are caching these views, we aren’t destroying scopes. Instead, scopes are being disconnected from the watch cycle. Because scopes are not being destroyed and recreated, controllers are not loading again on a subsequent viewing. If the app/controller needs to know when a view has entered or has left, then view events emitted from the ionView scope, such as $ionicView.enter, may be useful.
每个 View 都会被缓存 - 这完全没问题 - 但当你开始摆弄选项卡或菜单时，事情就会失控。
如果您确实想解决问题，只需禁用每个状态的缓存即可。那里有几个选项，但我发现唯一一个易于管理的选项是在配置状态时设置 cache: false:
.state('app', {
cache: false,
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
})
只需禁用所有状态的缓存，一切就会正常工作。
这是你的工作Plunker .
关于cordova - ionic 不同的选项卡内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32430920/