Search code examples
htmlangularjsiframeangularjs-routing

Persisting an iframe in Angularjs


So I've recently been converting an old project to Angularjs, but there's a bigger section that I can't convert right now, but still need to work inside Angular.

To solve this I used an Iframe. The problem now is when I switch to a different page, the view and by association the iFrame is getting destroyed. This means when I switch back it will reload the iFrame and will lose the user's spot and any data they didn't save on the form. Usually I solve this by storing everything inside a service, but it won't work for this since its an iFrame.

Is there anyway to create the iFrame outside of the context of the template so when I switch back to the page I can call the iFrame to display, rather than reloading it, then I can manually destroy it when I want?

Or is there a better way to go about doing this? Thanks!


Solution

  • for anyone interested, what I ended up doing is putting the iFrame in a parent template inside an ng-if. When I go to the route I want the iframe in, I set the ng-if to true and leave it as true when I'm selecting different tabs and want it to persist, when I want it to switch or not persist I set the ng-if back to false and everything seems to be working as expected.