問(wèn)題描述

我正在使用 Angular.JS 和 Leaflet.JS 作為我所在位置的地圖，該地圖具有綁定了彈出窗口的地圖標(biāo)記.我需要使用一個(gè)帶有兩個(gè)不同圖標(biāo)(一個(gè)在下面的代碼中顯示)的跨度，您可以單擊它們來(lái)調(diào)用不同的函數(shù)，并在滿足某些條件時(shí)使用 ng-class 來(lái)更改類(lèi).這是我的代碼:

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

但是，當(dāng)我檢查元素時(shí)，我得到了這個(gè):

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 應(yīng)該向該函數(shù)發(fā)送特定對(duì)象和對(duì)象數(shù)組，但是當(dāng)我單擊圖標(biāo)時(shí)沒(méi)有任何反應(yīng).在我的研究中，我發(fā)現(xiàn)彈出窗口會(huì)阻止事件傳播(更多信息但我不是確定如何覆蓋它或修復(fù)它以使其與 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 評(píng)估一個(gè)字符串，我將變量固定為:

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 會(huì)正確輸出:

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>

但是，當(dāng)我單擊該圖標(biāo)時(shí)，什么也沒(méi)有發(fā)生，并且看起來(lái)函數(shù)沒(méi)有被調(diào)用.有人知道為什么會(huì)發(fā)生這種情況嗎?

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?

推薦答案

您的問(wèn)題來(lái)自于您手動(dòng)創(chuàng)建了一些 DOM，而這些 DOM 不是由 AngularJS 編譯的.

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

在這些情況下，您必須手動(dòng)編譯和鏈接元素.

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 字符串，并首先將其轉(zhuǎn)換為 DOM.因?yàn)?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 服務(wù)將此 DOM 編譯為鏈接函數(shù).

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

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

執(zhí)行時(shí)，此函數(shù)將返回一個(gè)完全由 Angular 控制的 jQuery DOM 樹(shù)，并在您作為參數(shù)提供給它的范圍內(nèi)運(yùn)行.這就是我在這里所做的

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)

請(qǐng)注意，我給出的范圍是 $scope 的子范圍.如果不這樣做，您將在所有彈出窗口之間共享相同的范圍，這不是一個(gè)好主意.創(chuàng)建新范圍是在 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()

從中可以得到實(shí)際的 DOM 節(jié)點(diǎn)

From that you can get the actual DOM node

linkFunction(scope)[0]

并將其傳遞給 Leaflet

And pass it to Leaflet

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

你就完成了！

有關(guān)詳細(xì)信息，請(qǐng)參閱 compiler 文檔.

For more info, please refer to the compiler doc.

關(guān)于范圍的更正問(wèn)題

這篇關(guān)于如何在 Leaflet 標(biāo)記彈出窗口中使用 Angular 指令 ng-click 和 ng-class的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！