Skip to content

Helpful tip on compiling popup templates #1193

@mwalsh728

Description

@mwalsh728

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions