Ion Caching Doesn't Work

Question

I am developing an application using Ionic, but caching does not work as expected. Every time I switch from root.home.notifsto root.home.chats, the view is chatsupdated (its controller is reinitialized).

I have 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 set up the cache this way$ionicConfigProvider.views.maxCache(100)

NOTE. I noticed that this error depends on the state in which I first move. There is an auth system that calls $state.$go('root.home.notifs'). A change to this change whose view is cached correctly

Any advice on how to solve this?

Answer 1

$ionicConfigProvider.views.forwardCache(true);

Answer 2

:

.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'
})

Answer 3

You can simply use the cache representation in HTML. You do not need to use it on the controller. If you want to refresh your page, 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 just<ion-view title="Dashboard">