javascript - ionic /如何期望刷新缓存 View ?

标签 javascript angularjs web ionic-framework

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

此版本的一个好消息是 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.

有意思,所以试了一下,真的很流畅。

但是,我遇到了一个严重的用户体验问题:

基本上,我的应用程序由 2 tabs 组成.

  • TabA 旨在显示负载和列表项。
  • TabB 旨在显示其他项目。

每个都有自己的导航:列出和显示特定项目。
显然,第一次,数据是新鲜的,但后来,因为缓存 => 陈旧。

Cached views真正适应了从“显示”到“列表”的特定选项卡的“后退”按钮。
事实上,滚动是维护的, Controller 不需要重新加载 => 非常好的性能。

但是,用户在单击特定选项卡时想要的是获得刷新的列表。

我真的找不到一种漂亮而有效的方法来刷新关于被点击元素的特定缓存 View 。

我已经声明了那些状态(显示了 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'
                }
            }
        });

因此,tab 的 Controller 是 tab.tabAListtab.tabAShow 的父级。

tabList 包含如下函数:

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

如何在点击tabA时触发该函数?
棘手的部分是 TabsCtrl 代码恰好在嵌套的 TabAList Controller 运行之前运行。
我试图在选项卡的 on-select 属性下包含一个 $rootScope.$broadcast('reloadTheItems',...)
但是由于 tabAList 在事件发送时尚未运行,因此事件被错过了。

有没有人经历过并且有一个漂亮的解决方案? 我重复一遍,目标是:“在选项卡点击时重新加载特定的缓存 View ”。

最佳答案

您应该监听 TabA View 的 $ionicView.enter 事件。

然后从 $scope 执行此操作:

        $scope.$on( "$ionicView.enter", function( scopes, states ) {
            if( states.fromCache && states.stateName == "tab.tabAList" ) {
                reloadItems();
            }
        });

...或类似的...

关于javascript - ionic /如何期望刷新缓存 View ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27117709/

相关文章:

angularjs - 使用 httpInterceptor 和 AngularJS 1.1.5 实现加载微调器

javascript - 在其他作用域中运行某个作用域的函数

php - PHP吐出PHP Parse错误:语法错误,/home/cg/root/main.php中第38行出现意外的“类”(T_CLASS)

php - 如何使 PHPlush() 在 Azure Web 应用程序上工作?

java - 解决 JVM 堆大小设置未传播到应用程序的问题

javascript - 使用带有附件的 SendGrid 的 Azure Function (JS)

Javascript:将对象值数组放入div

javascript - 无法通过angularjs在phonegap中显示联系人照片

javascript - 使用 javascript 和 CSS 显示图像

javascript - 如何使用 requirejs : jszip is not defined 包含 jszip