tombatossals / angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
http://tombatossals.github.io/angular-leaflet-directive
MIT License
1.5k stars 635 forks source link

Helpful tip on compiling popup templates #1193

Open mwalsh728 opened 6 years ago

mwalsh728 commented 6 years ago

Since this project seems to be still fairly popular but no longer maintained, for those of you who have had trouble compiling AngularJS templates within popups:

Here is the "popupopen" event in the listenMarkerEvents function on line 2,548 of ui-leaflet.js:

listenMarkerEvents: function listenMarkerEvents(marker, markerData, leafletScope, watchType, map) {
      marker.on("popupopen", function () /* event */{
          safeApply(leafletScope, function () {
              if (isDefined(marker._popup) || isDefined(marker._popup._contentNode)) {
                  markerData.focus = true;
                  _manageOpenPopup(marker, markerData, map); //needed since markerData is now a copy
              }
          });
      });

I added a delay to the _manageOpenPopup call with a $timeout to let other events occur - for example, marker.openPopup() - before compiling the template:

listenMarkerEvents: function listenMarkerEvents(marker, markerData, leafletScope, watchType, map) {
      marker.on("popupopen", function () /* event */{
          safeApply(leafletScope, function () {
              if (isDefined(marker._popup) || isDefined(marker._popup._contentNode)) {
                  markerData.focus = true;
                  // Add a small delay here to let other events occur before calling
                  $timeout(function() {
                     _manageOpenPopup(marker, markerData, map); //needed since markerData is now a copy
                  }, 500);
              }
          });
      });

This fixes what I believe to be a race condition when signalling the creation of a popover. You are free to tinker with the delay number; I set it to a half-second just to set an example.

When I installed this fix, my templates would finally compile and ng-click directives that called functions within the scope would finally work.

Since, the popup will at first display an un-compiled template, you may want to employ techniques in your template such as ng-bind and ng-cloak to ensure that the displayed HTML doesn't look too.... uncompiled. (Reducing the delay will obviously fix that problem!)

Hope this helps anyone who's been struggling with that issue!