javascript 离子 / 如何期望刷新缓存视图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27117709/
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
Ionic / How to expect a cached view to be refreshed?
提问by Mik378
I'm using the latest Ionic "nighty build" version currently.
我目前正在使用最新的 Ionic“夜间构建”版本。
One good news with this version is the concept of cached views:
这个版本的一个好消息是缓存视图的概念：
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 cycle. When navigating to a view which is already cached, its scope is then reconnected, and the existing element which was left in the DOM becomes the active view. This also allows for scroll position of previous views to be maintained.
默认情况下，视图会被缓存以提高性能。当一个视图被导航离开时，它的元素留在 DOM 中，它的作用域与循环断开连接。当导航到已经缓存的视图时，它的作用域会重新连接，并且留在 DOM 中的现有元素成为活动视图。这也允许保持先前视图的滚动位置。
Interesting, so I tried it and it's really smooth.
很有趣，所以我试了一下，真的很流畅。
However, I come across a severe UX issue:
但是，我遇到了一个严重的用户体验问题：
Basically, my app is composed of 2 tabs.
基本上，我的应用程序由 2 个tabs组成。
- TabA aims to display a load and list items.
- TabB aims to display other items.
- TabA 旨在显示负载和列表项。
- TabB 旨在显示其他项目。
Each one has its own navigation: listing and showing specific items.
Obviously, the first time, data are fresh, but then, since cached => stale.
每个都有自己的导航：列出和显示特定项目。
显然，第一次，数据是新鲜的，但是，因为缓存 => 陈旧。
Cached views is really adapted to the "back" button from the "show" to the "list" of a specific tab.
Indeed, scroll is maintain and controllers don't need to reload => very good performance.
缓存视图真正适用于从“显示”到特定选项卡的“列表”的“后退”按钮。
事实上，滚动是维护和控制器不需要重新加载 => 非常好的性能。
However, what a user wants when he clicks on a particular tab is to get a refreshed list.
但是，当用户单击特定选项卡时，他想要的是获得刷新的列表。
I really can't find a pretty and efficient way to refresh a specific cached view regarding the clicked element.
我真的找不到一种漂亮而有效的方法来刷新有关单击元素的特定缓存视图。
I've got those declared states(showing the example for TabA):
我有那些声明的状态（显示 TabA 的示例）：
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "/tabs.tpl.html",
controller: 'TabsCtrl'
})
.state('tab.tabAList', {
url: '/items',
views: {
'tab-a': {
templateUrl: '/tabAList.tpl.html',
controller: 'TabACtrl'
}
}
})
.state('tab.tabAShow', {
url: '/tabAList/:itemId',
views: {
'tab-a': {
templateUrl: '/tabAShow.tpl.html',
controller: 'TabAShowCtrl'
}
}
});
So, tab's controller is the parent of tab.tabAListand tab.tabAShow.
所以,tab的控制器是tab.tabAListand的父级tab.tabAShow。
tabListcontains a function like:
tabList包含一个函数，如：
$scope.reloadItems = function() {
//...
}
How to trigger this function when tabAis clicked?
The tricky part is that TabsCtrlcode is run just before nested TabAListcontroller is run.
I tried to involve a $rootScope.$broadcast('reloadTheItems',...)under the on-selectattribute of the tab.
But the event is missed since tabAListhasn't run yet at the time of the event sending.
tabA单击时如何触发此功能？
棘手的部分是TabsCtrl代码在嵌套TabAList控制器运行之前运行。
我试图在选项卡$rootScope.$broadcast('reloadTheItems',...)的on-select属性下涉及一个。
但是由于tabAList在事件发送时尚未运行，因此错过了该事件。
Has anyone experienced it and has a pretty solution? I repeat, the goal is: "Reload a specific cached view on tab click".
有没有人经历过并且有很好的解决方案？我再说一遍，目标是：“单击选项卡时重新加载特定的缓存视图”。
回答by Jesper We
You should listen to the $ionicView.enterevent for the view for TabA.
您应该监听$ionicView.enterTabA 视图的事件。
Then do this from the $scope:
然后从以下位置执行此操作$scope：
$scope.$on( "$ionicView.enter", function( scopes, states ) {
if( states.fromCache && states.stateName == "tab.tabAList" ) {
reloadItems();
}
});
...or something similar...
......或类似的东西......
