Ionic /如何期望刷新缓存视图？

I'm using the latest Ionic "nighty build" version currently.

我目前正在使用最新的Ionic“nighty build”版本。

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:

但是，我遇到了一个严重的UX问题：

Basically, my app is composed of 2 tabs.

基本上，我的应用程序由2个选项卡组成。

TabA aims to display a load and list items.
TabA旨在显示加载和列表项。
TabB aims to display other items.
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.tabAList and tab.tabAShow.

因此，tab的控制器是tab.tabAList和tab.tabAShow的父级。

tabList contains a function like:

tabList包含如下函数：

$scope.reloadItems = function() {
    //...
}

How to trigger this function when tabA is clicked?
The tricky part is that TabsCtrl code is run just before nested TabAList controller is run.
I tried to involve a $rootScope.$broadcast('reloadTheItems',...) under the on-select attribute of the tab.
But the event is missed since tabAList hasn't run yet at the time of the event sending.

单击tabA时如何触发此功能？棘手的部分是TabsCtrl代码在嵌套的TabAList控制器运行之前运行。我尝试在选项卡的on-select属性下涉及$ rootScope。$ broadcast（'reloadTheItems'，...）。但由于tabalist在事件发送时尚未运行，因此错过了该事件。

Has anyone experienced it and has a pretty solution? I repeat, the goal is: "Reload a specific cached view on tab click".

有没有人经历过它并有一个漂亮的解决方案？我再说一遍，目标是：“在选项卡点击上重新加载特定的缓存视图”。

1 个解决方案

#1

You should listen to the $ionicView.enter event for the view for TabA.

你应该听一下$ ionicView.enter事件来获取TabA的视图。

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...

...或类似的东西......

#1