如何在Ionic中使用选项卡,在导航上使用抽象状态参数/清除缓存

时间:2015-06-20 06:12:39

标签: angularjs caching tabs routing ionic

我有一个包含组列表的主屏幕。每个列表项都使用参数(gid,来自groupid)链接到相同的抽象状态。

        .state('group', {
            url: "/group/:gid",
            abstract: true,
            templateUrl: "templates/group.html"
        })

        .state('group.members', {
            url: '/members',
            views: {
                'group-members': {
                    templateUrl: 'templates/group-members.html',
                    controller: 'MemberCtrl'
                }
            }
        })

        .state('group.events', {
            url: '/events',
            views: {
                'group-events': {
                    templateUrl: 'templates/group-events.html',
                    controller: 'EventCtrl'
                }
            }
        })

        .state('group.settings', {
            url: "/settings",
            views: {
                'group-settings': {
                    templateUrl: "templates/group-settings.html",
                    controller: 'SettingsCtrl'
                }
            }
        })

在那个抽象状态中,我有3个选项卡可以在同一参数/组上工作。虽然这适用于我从主屏幕链接到的选项卡,但其他选项卡记住了它们的历史记录,在返回主屏幕并选择另一个组后,只有链接到选项卡显示正确组的详细信息。其他选项卡将显示先前(缓存)组的详细信息。

我认为可以通过在某处清除缓存来解决这个问题,但理想情况下我不希望每次都清除每个选项卡。在同一组中的选项卡之间导航时,应使用缓存。只有在返回主屏幕并且选择新组后,才能清除选项卡的缓存。

另一种选择可能是以某种方式让其他视图意识到已经选择了一个新组。对于链接到的标签很简单:参数在网址中给出。但其他人没有从主屏幕链接。有没有办法将参数传递给模板文件中的ion-tabs?

让这个工作的最佳方法是什么?这必须是偶尔出现的用例,我怀疑有一种处理它的首选方法。我正在使用Ionic 1.0.0。感谢。

2 个答案:

答案 0 :(得分:1)

group-members视图正在更新,但groups视图的其余部分已过时。通过将cache: false添加到下面的codepen中的状态,它工作正常。

  

http://codepen.io/whiskeyjack/pen/BNmpMx

javascript .state('group', { url: "/group/:gid", abstract: true, cache: false, templateUrl: "templates/group.html" })

另请参阅http://ionicframework.com/docs/api/service/ $ ionicHistory /

上的$ ionicHistory.clearCache()

答案 1 :(得分:0)

使用这种方式清除离子

中的缓存
<ion-view cache-view="false" view-title="My Title!"> ... </ion-view>