問題描述

我正在使用 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?

推薦答案

您的問題來自于您手動創建了一些 DOM，而這些 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.

代碼如下所示:

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

你就完成了！

有關詳細信息，請參閱 compiler 文檔.

For more info, please refer to the compiler doc.

關于范圍的更正問題

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