Passing ng-directive to Leaflet L.popup().setContent()

问题

Thank you for giving my question a look.

Goal: Pass an Angular directive to the .setContent() method of L.popup()

The Problem:

I need to run $compile on the directive in order for it to enter ng. But something like

.setContent($compile('<new_marker_form></new_marker_form'))

yields a

Failed to execute 'appendChild' on 'Node': The new child element is null.

as I bet the ng is trying to compile before leaflet has actually appeneded any HTML.

Not sure if this is better suited for Stack Overflow. Please let me know if I ought to move it.

回答1:

The closing > is missing in your example, not sure if it is just a typo in the question.

And you haven't linked the compiled element to any scope, the result of $compile is not an element, but a linking function. You have to call the function by passing a scope object that you want the element to bind with (or a least an empty object).

var linkFn = $compile('<new_marker_form></new_marker_form>');
var element = linkFn({}); // or pass any scope object, may be $rootScope.$new() if you do not have one.
L.popup().setContent(element[0]); // use element[0] to pass a DOM instead of jQuery/jqLite object.

Or a one liner ..

L.popup().setContent($compile('<new_marker_form></new_marker_form>')({}));

Hope this helps.

来源：https://stackoverflow.com/questions/25299128/passing-ng-directive-to-leaflet-l-popup-setcontent