How can I cache the contents of a tab?

I have a tabbed application and in one of the tabs I have a Google map. As you can imagine, I don’t want to initialize and load the map every time the user switches to that tab. As I understand it, Ionic doesn’t keep html-elements in the DOM so when I click on a new tab the the previous tab is removed from the DOM.

This isn’t an issue when it comes to the data of the app, I’ve managed to cache that using a service.

But what can I do to keep the entire HTML-contents of specific tabs?

I’m fairly new to both Ionic and AngularJS.


I thought I’d explain why this is neccessary in my app:

I have four tabs in my app. Two of the tabs are just listing data and details about each row. That part is fine. The third tab is an iframe showing facebook posts from a page. The fourth tab is an embedded google map. Both the facebook feed and the map can take some time load if the network connection is slow. And so when the user switches tabs and then back the user has to wait all that loading time again. I’d simply like to prevent Ionic from destroying the contents of some of my tabs.

Maybe someone from the Ionic team can suggest a solution to this?


1 Like