如何在传单标记弹出窗口中使用 Angular 指令 ng-click 和 ng-class [英] How to use Angular directives ng-click and ng-class inside Leaflet marker popup

查看:22
本文介绍了如何在传单标记弹出窗口中使用 Angular 指令 ng-click 和 ng-class的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我将 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?

推荐答案

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

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

大功告成!

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

For more info, please refer to the compiler doc.

纠正了有关范围的问题

这篇关于如何在传单标记弹出窗口中使用 Angular 指令 ng-click 和 ng-class的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆