CODE
http://codepen.io/hawkphil/pen/LEBNVB
我在侧边菜单中有两个页面(link1
和link2
)。每个页面都有2个标签:
link1
:tab 1.1
和tab 1.2
link2
:tab 2.1
和tab 2.2
我为每个页面使用ion-tabs
来包含2个标签。
这是一个非常简单的设计:我想点击link1
或link2
转到合适的路线。但由于某种原因,状态已正确更改(请参阅控制台),但实际的html模板未更新。 你能找出错误和解决方法吗?
似乎存在一些缓存问题。
HTML
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<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-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</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-balanced">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close ui-sref="link1">
Link 1
</ion-item>
<ion-item nav-clear menu-close ui-sref="link2">
Link 2
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar-calm">
<h1 class="title">Right Menu</h1>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
<div class="list">
<a class="item item-avatar" href="#">
<img src="img/avatar1.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-side-menus>
<script id="link1.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 1.1</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 1.2</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
<script id="link2.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 2.1</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 2.2</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('link1', {
url: "/link1",
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
$urlRouterProvider.otherwise("/link1");
})
.controller('AppCtrl', ['$scope', '$rootScope', '$state', '$stateParams', function($scope, $rootScope, $state, $stateParams) {
$rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
console.log(toState);
});
}])
答案 0 :(得分:32)
您目前指的是1.0.0-rc.0
的最新版本,它在从一个状态转换到另一个状态时发生错误,但未加载视图。
进一步的研究发现,他们在1.0.0-beta.1
版1.0.0-beta.14
版本1.0.0-rc.0
上发布了候选版本后,发布了14个测试版。
nav-view
在1.0.0-beta.13
版本之前工作正常,但在1.0.0-beta.14
之后停止工作(这是最后一次测试版发布),
我建议你将你的版本降级为1.0.0-beta.13
,我知道根据测试版本不是好事,但直到离子释放稳定版本,你必须依赖它。
Working Codepen 与1.0.0-beta.13
<强>更新强>
您的问题是您的视图正在缓存,因为默认情况下,您的离子应用内已启用缓存。
直接来自Ionic Doc(最新发布文档1.0.0-beta.14)
默认情况下,会缓存视图以提高性能。当视图是 导航离开,其元素保留在DOM中,其范围是 与$ watch循环断开连接。导航到视图时 已经缓存,然后重新连接其范围和现有范围 留在DOM中的元素成为活动视图。这也是 允许维护先前视图的滚动位置。缓存视图的最大容量为10。
通过在cache: false
状态函数中提及$stateProvider
或通过在角配置阶段内执行$ionicConfigProvider.views.maxCache(0);
来全局禁用nav-view的缓存。
所以在你的情况下,这就是确切的问题,你的第一个观点是获得缓存&amp;再次展示它再次
有三种方法可以解决这个问题
<强> 1。全局禁用缓存
通过将所有缓存设置为0来禁用所有缓存,然后再使用它添加$ionicConfigProvider
依赖项。
$ionicConfigProvider.views.maxCache(0);
<强> 2。禁用状态提供程序中的缓存
$stateProvider
.state('link1', {
url: "/link1",
cache: false,
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
cache: false,
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
第3。使用属性
禁用缓存 <ion-tab title="Home" icon="ion-home">
<ion-view cache-view="false" view-title="Home">
<!-- Ion content here -->
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view cache-view="false" view-title="Home">
<!-- Ion content here -->
</ion-view>
</ion-tab>
<强> Codepen 强>
我相信更新的方法很难实施。感谢。
Github问题同一问题link here