I'm writing an Angular (1.4.8) directive that produces a map showing different types of objects (e.g. cars, trucks, fire hydrants etc). I'd like the directive to be as reusable as is practical. One way I think I can achieve this is by having the isolate scope include a function to provide HTML for an object's map popup, e.g.
- carsCtrl.js includes a function
getPopupHtml(car) - cars.html includes the map directive and the attribute
template="getPopupHtml(car)" - mapDirective.js has isolate scope that includes
template: "&" - when an object on the map is clicked its popup's HTML is provided by
scope.template({car: car})
Within getPopupHtml(car) I have the following:
return $compile("<h1>Car {{car.id}}</h1>")({car: car});
However Angular gets unhappy, throwing Referencing DOM nodes in Angular expressions is disallowed!
If I change getPopupHtml(car) to
return $compile("<h1>Car {{car.id}}</h1>")({car: car}).get(0).innerHTML;
it gives me the uncompiled string with none of the scope values assigned.
Is there a way to achieve what I'm looking for, or is this a fundamentally flawed approach with a better alternative?
