如何使用角度指令NG-点击和纳克级的传单里面弹出标志 [英] How to use Angular directives ng-click and ng-class inside Leaflet marker popup

问题描述

我使用Angular.JS和Leaflet.JS在我的位置的地图与绑定到他们弹出地图标记。我需要使用的跨度有两个不同的图标（一个在下面code所示），您可以点击调用不同的函数和NG-类来更改类，如果某些条件得到满足。这是我的code：

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>

吴单击要发送函数双方的具体对象和对象的数组但是当我点击该图标没有任何反应。在我的研究，我发现，在弹出的prevents事件传播（更多信息，但我不知道如何覆盖它还是一个修复得到它具有角工作。有没有人对如何做到这一点的想法？

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-点击/类评价我固定变量的字符串是这样的：

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，这是不是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.

在code是这样的：

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)

然后，我编译这个DOM到链接功能，使用$编译服务。

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

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

执行时，该函数会返回一个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)

请注意，我给的范围为$范围的子范围。如果不这样做，你会分享所有弹出窗口之间的相同的范围，这不会是一个好主意。创建新的范围是在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]

和它传递到单张

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

和大功告成！

有关更多信息，请参阅编译文档。

For more info, please refer to the compiler doc.

编辑：就范围纠正问题。

rectified issues regarding scope

这篇关于如何使用角度指令NG-点击和纳克级的传单里面弹出标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！