我正在使用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应该将特定对象和对象数组都发送到该函数,但当我点击图标时,什么也不会发生。在我的研究中,我发现弹出窗口会阻止事件传播(更多信息),但我不确定如何覆盖它或修复它以使其与Angular一起正常工作。有人知道如何实现吗?
更新:
由于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>
但是当我点击图标时,什么也没有发生,似乎这些功能没有被调用。有人知道为什么会发生这种情况吗?