2

I am using a third party JS API that creates an object attached to an html element on my angular template.

Each time the template is loaded I want to reuse the object already created and reattach it to the correct html element.

In this plunker you can see the issue demonstrated. And here are the steps to reproduce. I really appreciate any suggests on how to preserve the first object between page loads.

Thanks in advance.

Problem Description

To understand the problem:
  • Tap the "Show Map" link above. The "map.html" template is loaded correctly and a map is shown.
  • Move the map or zoom in a little so the map is changed
  • On the Map page tap "Show Home Page" link to return to this page.
  • Now, tap the home page link to return to this page
  • Now, tap "Show Map" for a second time and you can see the map is recreated.

I would like for the "map.html" template to reuse the existing map object so the map stays unchanged between page views.

thrag
  • 1,536
  • 4
  • 20
  • 32

2 Answers2

1

This is a non-trivial problem.

The angular-gm module reuses map instances so there is no memory leak. There is also angular-google-maps.

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
0

I do it with the help of the routeproviderapi

http://docs.angularjs.org/api/ng.$routeProvider

You have the opportunity to have a resolver, that resolves all dependencies, that your controller needs for rendering the template. My resolover caches the object for the specific routeparams and will return this already instantiated object.

So basically your map-object is a dependency of your controller. The resolver manages the injection of this dependency and there you can implement some caching.

TheHippo
  • 61,720
  • 15
  • 75
  • 100
kfis
  • 4,739
  • 22
  • 19
  • OK. This make sense but I think it only solves half of the problem. Now, using your solution, the map object is cached. Since. it was created with 'new esri.map("elementID")' the element with ID 'elementID' was destroyed when we navigated away. Now we navigate back and we still have the cached map object but a new element (albeit with the same ID as before). If the api supported map.setElement(el) then this would be enough but it doesn't. So, somehow I need to reuse not just the map object but also the html element. – thrag Apr 27 '13 at 11:31
  • Maybe you can detach the DOMTElement on first render, cache it and attach it back to your html, if this directive is used again somewhere. I think about some directive, that would manage this. The codeengineering part is left to you :) Maybe this video can give you some more inspiration, how this could be handled http://egghead.io/video/angularjs-directive-to-directive-communication/ – kfis Apr 27 '13 at 12:33