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

Mik*_*378 9 javascript web angularjs ionic-framework

我目前正在使用最新的Ionic"nighty build"版本.

这个版本的一个好消息是缓存视图的概念:

默认情况下,会缓存视图以提高性能.当视图被导航离开时,其元素将保留在DOM中,并且其范围与循环断开连接.导航到已缓存的视图时,其范围将重新连接,并且留在DOM中的现有元素将成为活动视图.这也允许保持先前视图的滚动位置.

有意思,所以我尝试了它,它非常顺利.

但是,我遇到了一个严重的UX问题:

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

  • TabA旨在显示加载和列表项.
  • TabB旨在显示其他项目.

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

缓存视图实际上适用于从特定选项卡的"显示"到"列表"的"后退"按钮.
实际上,滚动是维护的,控制器不需要重新加载=>非常好的性能.

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

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

我有那些声明的状态(显示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'
                }
            }
        });
Run Code Online (Sandbox Code Playgroud)

因此,tab"S控制器是家长tab.tabAListtab.tabAShow.

tabList 包含如下函数:

$scope.reloadItems = function() {
    //...
}
Run Code Online (Sandbox Code Playgroud)

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

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

Jes*_* We 27

您应该收听$ionicView.enterTabA视图的事件.

然后从$scope:

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

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