Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Helpful tip on compiling popup templates #1193

Open
mwalsh728 opened this issue Oct 12, 2018 · 0 comments
Open

Helpful tip on compiling popup templates #1193

mwalsh728 opened this issue Oct 12, 2018 · 0 comments

Comments

@mwalsh728
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant