CODEWITHSUNDEEP
cachingionic-framework
Devid Farinelli
Devid Farinelli

Reputation: 7544

Ionic Caching not working

I'm developing an app using Ionic, but caching isn't working as expected. Every time I switch from root.home.notifs to root.home.chats the chats view is refreshed (its controller is reinitialized).

I've 2 tabs:

  <ion-footer-bar>
    <ion-tabs class="tab-bottom tabs-striped">
      <ion-tab icon="ion-ios-chatboxes-outline" ui-sref="root.home.chats">
      </ion-tab>
      <ion-tab icon="ion-ios-heart-outline" ui-sref="root.home.notifs">
      </ion-tab>
    </ion-tabs>
  </ion-footer-bar>

And these states (my controllers are empty):

.state('root.home', {
  abstract: true,
  cache : true,
  url: '/home',
  templateUrl: 'components/home/templates/home.html'
})
.state('root.home.chats', {
  url: '/chats',
  cache : true,
  controller: 'ChatCtrl',
  templateUrl: 'components/home/templates/home.chats.html'
})
.state('root.home.notifs', {
  url: '/notifs',
  cache : true,
  controller: 'NotifCtrl',
  templateUrl: 'components/home/templates/home.notifs.html'
})

Every view has cache-view="true" and I've configured the cache this way $ionicConfigProvider.views.maxCache(100)

NOTE: I've noticed that this error depends on which state I navigate to first. There's an auth system that calls $state.$go('root.home.notifs'). Changing this changes which view is cached correctly

Any tip on how to solve this?

Upvotes: 4

Views: 1353

Answers (3)

Anuj
Anuj

Reputation: 650

Simply You can use cache-view in HTML.No need to use it on controller. If You want to Refresh your page then use <ion-view title="Dashboard" cache-view="false"> . But if You want to cache ur page then put <ion-view title="Dashboard" cache-view="true">or simply <ion-view title="Dashboard">

Upvotes: -1

Erik Minarini
Erik Minarini

Reputation: 4845

Try using this to cache the forward view $ionicConfigProvider.views.forwardCache(true);

Upvotes: 3

Vikram Biwal
Vikram Biwal

Reputation: 2826

Try this:

.state('root.home', {
  abstract: true,
  cache : true,
  url: '/home',
  templateUrl: 'components/home/templates/home.html'
})
.state('root.home.chats', {
  url: '/chats',
 cache : true,
  controller: 'ChatCtrl',
  templateUrl: 'components/home/templates/home.chats.html'
})
.state('root.home.notifs', {
  url: '/notifs',
 cache : true,
  controller: 'NotifCtrl',
  templateUrl: 'components/home/templates/home.notifs.html'
})

Upvotes: 1

Related Questions