使用 ui-router 和 ion-tabs 时模板不会更新 [英] Template does not update when using ui-router and ion-tabs
问题描述
代码
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
标签示例 <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"><script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script><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"></ion-nav-buttons><ion-nav-buttons side="right"><button class="button button-icon button-clear ion-navicon" menu-toggle="right"></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">左</h1></ion-header-bar><离子含量><离子列表><ion-item nav-clear menu-close ui-sref="link1">链接 1</ion-item><ion-item nav-clear menu-close ui-sref="link2">链接 2</ion-item></ion-list></离子含量></ion-side-menu><ion-side-menu side="right"><ion-header-bar class="bar-calm"><h1 class="title">右侧菜单</h1></ion-header-bar><离子含量><div class="list list-inset"><label class="item item-input"><i class="icon ion-search placeholder-icon"></i><input type="text" placeholder="搜索"> <div class="list"><a class="item item-avatar" href="#"><img src="img/avatar1.jpg"><h2>文克曼</h2><p>退后，伙计.我是一名科学家.</p></a>
</离子含量></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="首页"><ion-content has-header="true" has-tabs="true" padding="true"><p>测试</p><p>测试标签1.1</p></离子含量></ion-view></ion-tab><ion-tab title="About" icon="ion-ios-information"><ion-view view-title="首页"><ion-content has-header="true" has-tabs="true" padding="true"><p>测试</p><p>测试标签1.2</p></离子含量></ion-view></ion-tab></ion-tabs><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="首页"><ion-content has-header="true" has-tabs="true" padding="true"><p>测试</p><p>测试标签2.1</p></离子含量></ion-view></ion-tab><ion-tab title="About" icon="ion-ios-information"><ion-view view-title="首页"><ion-content has-header="true" has-tabs="true" padding="true"><p>测试</p><p>测试标签2.2</p></离子含量></ion-view></ion-tab></ion-tabs>
JS
angular.module('ionicApp', ['ionic']).config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('link1', {网址:/link1"，意见:{'菜单内容':{模板网址:link1.html"}}}).state('link2', {网址:/link2"，意见:{'菜单内容':{模板网址: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) {控制台日志(toState)；});}])您当前所指的最新版本 1.0.0-rc.0 在从一种状态转换到另一个它没有加载视图.
进一步的研究发现，在他们现在的版本之后，他们有 14 个 beta 版本，从版本 1.0.0-beta.1 到 1.0.0-beta.141.0.0-rc.0 这是候选版本.
nav-view 在 1.0.0-beta.13 版本之前一直运行良好，但在 1.0.0-beta.14 之后它停止工作>(这是最后一个测试版)，
我建议你将你的版本降级到 1.0.0-beta.13，我知道依赖 beta 版本不是一件好事，但直到 ionic 发布稳定版本你必须依赖它.
工作 Codepen 使用 1.0.0-beta.13
更新:
您的问题是您的视图正在被缓存，因为默认情况下，您的 ionic 应用程序内启用了缓存.
直接来自 Ionic Doc(最新版本文档 1.0.0-测试版.14)
<块引用>默认情况下，视图会被缓存以提高性能.当一个视图是导航离开，它的元素留在 DOM 中，它的作用域是与 $watch 循环断开连接.当导航到一个视图时已经缓存，然后重新连接它的作用域，并且现有的留在 DOM 中的元素成为活动视图.这也是允许保持先前视图的滚动位置.缓存视图的最大容量为 10.
因此，通过在 $stateProvider 上提及 cache: false 状态功能或通过执行 $ionicConfigProvider.views.maxCache(0) 全局禁用导航视图的缓存; 在 angular 配置阶段.
因此，在您的情况下，这就是确切的问题，您的第一个视图正在获取缓存 &再次展示它&再次
有3种方法可以解决这个问题
1.全局禁用缓存
通过将其设置为 0 来禁用所有缓存，然后在使用之前添加 $ionicConfigProvider 依赖项.
$ionicConfigProvider.views.maxCache(0);2.禁用状态提供程序中的缓存
$stateProvider.state('link1', {网址:/link1"，缓存:假，意见:{'菜单内容':{模板网址:link1.html"}}}).state('link2', {网址:/link2"，缓存:假，意见:{'菜单内容':{模板网址:link2.html"}}});3.使用属性禁用缓存
<ion-view cache-view="false" view-title="Home"><!-- 这里的离子含量--></ion-view></ion-tab><ion-tab title="About" icon="ion-ios-information"><ion-view cache-view="false" view-title="Home"><!-- 这里的离子含量--></ion-view></ion-tab> 我相信更新后的方法非常适合实施.谢谢.
针对同一问题的 Github 问题此处链接
CODE
http://codepen.io/hawkphil/pen/LEBNVB
I have two pages (link1 and link2) from the side menu. Each page has 2 tabs:
link1: tab 1.1 and tab 1.2
link2: tab 2.1 and tab 2.2
I am using ion-tabs for each page to contain the 2 tabs.
This is a very simple design: I want to click on the link1 or link2 to go to appropriate route. But for some reason, the state has changed correctly (see Console) but the actual html template did not get updated. Can you find out what's wrong and how to fix?
There seems to be some caching problem or something.
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);
});
}])
You are currently referring to the latest release which is 1.0.0-rc.0 which has bug while transition from one state to another it is not loading the view.
Further research found that, they had 14 beta releases from version 1.0.0-beta.1 to 1.0.0-beta.14 after they are now on version 1.0.0-rc.0 which is release candidate.
nav-view is working perfect till 1.0.0-beta.13 version but it stop working after 1.0.0-beta.14(which is last beta release),
I would suggest you to degrade your version to 1.0.0-beta.13, I know depending on beta version is not good thing but still until ionic release stable version you have to rely on it.
Working Codepen with 1.0.0-beta.13
Update:
Your problem is your view are getting cached because by default caching is enabled inside your ionic app.
Straight from Ionic Doc (Latest Release doc 1.0.0-beta.14)
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.Maximum capacity of caching view is 10.
So by mentioning cache: false on $stateProvider states function or disabling cache of nav-view globally by doing $ionicConfigProvider.views.maxCache(0); inside angular config phase.
So in your case this is what exact problem, your 1st view is getting cache & showing it again & again
There are 3 ways to solve this issue
1. Disable cache globally
Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency.
$ionicConfigProvider.views.maxCache(0);
2. Disable cache within state provider
$stateProvider
.state('link1', {
url: "/link1",
cache: false,
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
cache: false,
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
3. Disable cache with an attribute
<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>
I believe the updated approach would be great to implement. Thanks.
Github issue for the same issue link here
这篇关于使用 ui-router 和 ion-tabs 时模板不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
