离子/如何期望刷新缓存视图?

时间:2014-11-25 02:16:42

标签: javascript angularjs web ionic-framework

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

这个版本的一个好消息是cached views的概念:

  

默认情况下,会缓存视图以提高性能。当视图是   导航离开,其元素保留在DOM中,其范围是   与循环断开连接。导航到视图时   已经缓存,然后重新连接其范围和现有范围   留在DOM中的元素成为活动视图。这也是   允许维护以前视图的滚动位置。

有趣,所以我尝试了它,它非常顺利。

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

基本上,我的应用由2 tabs组成。

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

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

缓存视图实际上适用于从特定标签的“显示”到“列表”的“后退”按钮。
实际上,滚动是维护的,控制器不需要重新加载=>非常好的表现。

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

我真的找不到一种非常有效的方法来刷新有关被点击元素的特定缓存视图。

我已经宣布(显示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的控制器是tab.tabAListtab.tabAShow的父级。

tabList包含如下函数:

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

单击tabA时如何触发此功能?
棘手的部分是TabsCtrl代码在嵌套TabAList控制器运行之前运行 我尝试在标签的$rootScope.$broadcast('reloadTheItems',...)属性下使用on-select 但由于事件发送时tabAList尚未运行,因此错过了该事件。

有没有人经历过这个并且有一个漂亮的解决方案? 我再说一遍,目标是:“在选项卡上重新加载特定的缓存视图”。

1 个答案:

答案 0 :(得分:27)

您应该收听TabA视图的$ionicView.enter事件。

然后从$scope

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

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