如何在 Leaflet 标记弹出窗口中使用 Angular 指令

问题描述

我正在使用 Angular.JS 和 Leaflet.JS 作为我所在位置的地图，该地图具有绑定了弹出窗口的地图标记.我需要使用一个带有两个不同图标(一个在下面的代码中显示)的跨度，您可以单击它们来调用不同的函数，并在满足某些条件时使用 ng-class 来更改类.这是我的代码:

I'm using Angular.JS and Leaflet.JS for a map in my location that has map markers with popups binded to them. I need to use a span with two different icons (one shown in code below) that you can click to call different functions and with ng-class to change the class if certain conditions are met. This is my code:

var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('<br><span ng-class="thumbsUpClass(' + hotelsSelectedDates[i]['hotels'][s] + ')" ng-click="addChoice(' + hotelsSelectedDates[i]['hotels'][s] + ',' + hotels + ')"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>');

但是，当我检查元素时，我得到了这个:

However when I inspect the element I get this:

<span ng-class="thumbsUpClass([object Object])" ng-click="addChoice([object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object])"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>

ng-click 应该向该函数发送特定对象和对象数组，但是当我单击图标时没有任何反应.在我的研究中，我发现弹出窗口会阻止事件传播(更多信息但我不是确定如何覆盖它或修复它以使其与 Angular 一起使用.有人知道如何完成此操作吗?

The ng-click should send that function both the specific object and the array of objects but when I click the icon nothing happens. In my research I found that the popup prevents event propagation (more info but I'm not sure how to override it or a fix to get it to work with angular. Would anyone have an idea of how to accomplish this?

更新:

由于 ng-click/class 评估一个字符串，我将变量固定为:

Since ng-click/class evaluate a string I fixed the variables to be like this:

$scope.item = hotelsSelectedDates[i]['hotels'][s]
$scope.set = hotels
var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('<br><span ng-class="thumbsUpClass(item)" ng-click="addChoice(item,set)"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>');

然后 html 会正确输出:

The html then comes out correctly:

<span ng-class="thumbsUpClass(item)" ng-click="addChoice(item,set)"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>

但是，当我单击该图标时，什么也没有发生，并且看起来函数没有被调用.有人知道为什么会发生这种情况吗?

However when I click the icon nothing happens and it doesn't look like the functions are being called. Anyone have any clue why this would happen?

推荐答案

您的问题来自于您手动创建了一些 DOM，而这些 DOM 不是由 AngularJS 编译的.

Your issue comes from the fact that you are manually creating some DOM, which was not compiled by AngularJS.

在这些情况下，您必须手动编译和链接元素.

In those cases, you have to manually compile and link the element.

代码如下所示:

var html = '<br><span ng-class="thumbsUpClass(item)" ' +
    'ng-click="addChoice(item,set)"><span class="popup-container"><span ' +
    'class="icon-stack thumbs-up-stack"><i class="icon-sign-blank ' +
    'icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>',
    linkFunction = $compile(angular.element(html)),
    newScope = $scope.$new();

newScope.item = hotelsSelectedDates[i]['hotels'][s]
newScope.set = hotels
var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup(linkFunction(newScope)[0]);

在这里，我获取您的 HTML 字符串，并首先将其转换为 DOM.因为 AngularJS 吃的是 DOM，而不是字符串.

Here I take your HTML string, and I start by transforming it into DOM. Because AngularJS eats DOM, not strings.

angular.element(html)

然后，我使用 $compile 服务将此 DOM 编译为链接函数.

Then, I compile this DOM into a link function, using the $compile service.

linkFunction = $compile(angular.element(html));

执行时，此函数将返回一个完全由 Angular 控制的 jQuery DOM 树，并在您作为参数提供给它的范围内运行.这就是我在这里所做的

When executed, this function will return a jQuery DOM tree fully controlled by Angular, running in the scope you give to it as argument. This is what I do here

linkFunction(newScope)

请注意，我给出的范围是 $scope 的子范围.如果不这样做，您将在所有弹出窗口之间共享相同的范围，这不是一个好主意.创建新范围是在 var 声明中完成的

Please note that the scope I give is a child scope of $scope. Without doing this, you would share the same scope between all popups, and this would not be a good idea. Creating the new scope was done in the var declaration

newScope = $scope.$new()

从中可以得到实际的 DOM 节点

From that you can get the actual DOM node

linkFunction(scope)[0]

并将其传递给 Leaflet

And pass it to Leaflet

.bindPopup(linkFunction(newScope)[0]);

你就完成了！

有关详细信息，请参阅 compiler 文档.

For more info, please refer to the compiler doc.

关于范围的更正问题

这篇关于如何在 Leaflet 标记弹出窗口中使用 Angular 指令 ng-click 和 ng-class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！