CODEWITHSUNDEEP
angularjscachingtabsroutesionic-framework
Whiskey
Whiskey

Reputation: 342

How to use tabs in Ionic with a abstract state parameter / clear cache on navigation

I have a home screen with a list of groups. Each list item links to the same abstract state with a parameter (gid, from 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'
                }
            }
        })

In that abstract state I have 3 tabs that should work on the same parameter/group. While this works well for the tab that I link to from the home screen, the other tabs remember their history and after going back to the home screen and selecting another group only the linked to tab shows the details for the correct group. The other tabs will show details for the previously (cached) group.

I think this might be fixed with clearing the cache somewhere, but ideally I do not want to clear it each time for each tab. While navigating between tabs in the same group the cache should be used. Only when going back to the home screen and after a new group is selected should the cache of the tabs be cleared.

An alternative might be to somehow make the other views aware that a new group has been selected. For the tab that is linked to that is easy: the parameter is given in the url. But the others are not linked to from the home screen. Is there a way to pass an argument to ion-tabs in a template file?

What is the best approach for getting this to work? This must be a use case that occurs now and then and I suspect there is a preferred way for handling it. I am using Ionic 1.0.0. Thanks.

Upvotes: 0

Views: 1559

Answers (2)

nuba
nuba

Reputation: 61

The group-members view was being updated, but the rest of the groups view was stale. By adding cache: false to the state in the codepen below it worked fine.

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

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

See also $ionicHistory.clearCache() at http://ionicframework.com/docs/api/service/$ionicHistory/

Upvotes: 1

S Vinesh
S Vinesh

Reputation: 539

Use this way to clear cache in ionic

<ion-view cache-view="false" view-title="My Title!"> ... </ion-view>

Upvotes: 0

Related Questions