javascript - 如何在 Leaflet 标记弹出窗口中使用 Angular 指令 ng-click 和 ng-class

Question

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

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>');

然而，当我检查元素时，我得到了这个:

<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 应该发送特定对象和对象数组的函数，但是当我单击图标时没有任何反应。在我的研究中，我发现弹出窗口阻止了事件传播(more info，但我不确定如何覆盖它或修复它以使其与 Angular 一起工作。有人知道如何完成这个吗？

更新:

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

$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 正确输出:

<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>

但是，当我单击该图标时，没有任何反应，而且看起来并没有调用函数。任何人都知道为什么会发生这种情况？

Answer 1

你的问题来自于你手动创建了一些 DOM，它不是由 AngularJS 编译的。

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

代码看起来像这样:

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，而不是字符串。

angular.element(html)

然后，我使用 $compile 服务将这个 DOM 编译成一个链接函数。

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

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

linkFunction(newScope)

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

newScope = $scope.$new()

从那里你可以得到实际的 DOM 节点

linkFunction(scope)[0]

然后传给Leaflet

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

大功告成!

更多信息，请引用compiler文档。

编辑:修正范围问题