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

Question

我正在使用Angular.JS和Leaflet.JS作为我所在位置的地图,该地图具有与其绑定的弹出窗口的地图标记.我需要使用带有两个不同图标的span(一个在下面的代码中显示),您可以单击以调用不同的函数,如果满足某些条件,则使用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应该发送该功能的特定对象和对象数组,但是当我点击图标时没有任何反应.在我的研究中,我发现弹出窗口会阻止事件传播(更多信息,但我不知道如何覆盖它或修复它以使角度工作.有人会知道如何实现这一点？

更新:

由于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,而这些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]);

而且你已经完成了!

有关详细信息,请参阅编译器文档.

编辑:纠正有关范围的问题

Answer 2

您可以在angular-leaflet-directive中使用对Angular内容的新支持:

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

... 

$scope.markers.push( { lat: ...,
                       lng: ...,
                       message: html,
                       getMessageScope: function() { return $scope; },          
});