javascript 使用 ui-router 和 ion-tabs 时模板不会更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28827928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Template does not update when using ui-router and ion-tabs
提问by HP.
CODE
代码
http://codepen.io/hawkphil/pen/LEBNVB
http://codepen.io/hawkphil/pen/LEBNVB
I have two pages (link1and link2) from the side menu. Each page has 2 tabs:
我从侧面菜单中有两页（link1和link2）。每个页面有 2 个标签：
link1: tab 1.1and tab 1.2
link1:tab 1.1和tab 1.2
link2: tab 2.1and tab 2.2
link2:tab 2.1和tab 2.2
I am using ion-tabsfor each page to contain the 2 tabs.
我ion-tabs为每个页面使用包含 2 个选项卡。
This is a very simple design: I want to click on the link1or link2to 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?
这是一个非常简单的设计：我想点击link1或link2去合适的路线。但由于某种原因，状态已正确更改（请参阅控制台）但实际的 html 模板并未更新。你能找出问题所在以及如何解决吗？
There seems to be some caching problem or something.
似乎有一些缓存问题或什么的。
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
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);
});
}])
回答by Pankaj Parkar
You are currently referring to the latest release which is 1.0.0-rc.0which has bug while transition from one state to another it is not loading the view.
您目前指的是最新版本，1.0.0-rc.0该版本在从一种状态转换到另一种状态时存在错误，但未加载视图。
Further research found that, they had 14 beta releases from version 1.0.0-beta.1to 1.0.0-beta.14after they are now on version 1.0.0-rc.0which is release candidate.
进一步的研究发现，他们有 14 个 Beta 版本，从版本1.0.0-beta.1到1.0.0-beta.14现在1.0.0-rc.0是候选版本。
nav-viewis working perfect till 1.0.0-beta.13version but it stop working after 1.0.0-beta.14(which is last beta release),
nav-view在1.0.0-beta.13版本之前一直运行良好，但在之后停止工作1.0.0-beta.14（这是最后一个测试版），
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.
我建议你将你的版本降级到1.0.0-beta.13，我知道依赖 beta 版本并不是一件好事，但在 ionic 发布稳定版本之前，你必须依赖它。
Working Codepenwith 1.0.0-beta.13
工作Codepen与1.0.0-beta.13
Update:
更新：
Your problem is your view are getting cached because by default caching is enabled inside your ionic app.
您的问题是您的视图正在被缓存，因为默认情况下，您的 ionic 应用程序内启用了缓存。
Straight from Ionic Doc(Latest Release doc 1.0.0-beta.14)
直接来自Ionic Doc（最新版本 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.
默认情况下，视图会被缓存以提高性能。当一个视图被导航离开时，它的元素留在 DOM 中，它的作用域与 $watch 循环断开连接。当导航到一个已经缓存的视图时，它的作用域会重新连接，并且留在 DOM 中的现有元素成为活动视图。这也允许保持先前视图的滚动位置。缓存视图的最大容量为 10。
So by mentioning cache: falseon $stateProviderstates function or disabling cache of nav-view globally by doing $ionicConfigProvider.views.maxCache(0);inside angular config phase.
因此，通过提cache: false上$stateProvider国家的功能或全局做禁用NAV视图的高速缓存$ionicConfigProvider.views.maxCache(0);的角度配置阶段内。
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
有3种方法可以解决这个问题
1. Disable cache globally
1. 全局禁用缓存
Disable all caching by setting it to 0, before using it add $ionicConfigProviderdependency.
通过将其设置为 0 来禁用所有缓存，然后再使用它添加$ionicConfigProvider依赖项。
$ionicConfigProvider.views.maxCache(0);
2. Disable cache within state provider
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. Disable cache with an attribute
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>
I believe the updated approach would be great to implement. Thanks.
我相信更新后的方法非常适合实施。谢谢。
Github issue for the same issue link here
相同问题的 Github 问题链接在这里
