小编Ash*_*ley的帖子

我正在使用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应该发送该功能的特定对象和对象数组,但是当我点击图标时没有任何反应.在我的研究中,我发现弹出窗口会阻止事件传播(更多信息,但我不知道如何覆盖它或修复它以使角度工作.有人会知道如何实现这一点？

更新:

由于ng-click/class计算了一个字符串,我修改了这个变量:

$scope.item = hotelsSelectedDates[i]['hotels'][s]
$scope.set …

在Angular和Rails应用程序中使用Leaflet.js和Cloudmade时,我完全坚持解决一个奇怪的地图错误.这些地图几乎可以在每个地图上工作,除了我正在获得的分段上的几张地图(适用于开发):未捕获错误:无效的LatLng对象,它说是未定义的.我从JSON得到了lat和long,我已经验证了lat和long存在于JSON中,并且相同的lat/long适用于类似的地图.在Leaflet源代码中,它表示当lat/long为Not-A-Number时给出了错误,但是当我们在json中时,我很困惑lat/long不是数字.这是我在Chrome中获得的堆栈跟踪:

Uncaught Error: Invalid LatLng object: (undefined, undefined)
n.LatLng 
n.latLng 
n.Map.n.Class.extend.project 
n.Map.n.Class.extend._getNewTopLeftPoint 
n.Map.n.Class.extend._resetView 
n.Map.include.setView 
(anonymous function) 
jQuery.event.dispatch 
elemData.handle.eventHandle 
jQuery.event.trigger 
(anonymous function) 
jQuery.extend.each
jQuery.fn.jQuery.each 
jQuery.fn.extend.trigger 
(anonymous function) 
next 
Tab.activate 
Tab.show 
(anonymous function) 
jQuery.extend.each 
jQuery.fn.jQuery.each 
$.fn.tab 
(anonymous function) 
jQuery.event.dispatch
elemData.handle.eventHandle

这里有一点代码:

var map = L.map('map').setView([$scope.lat, $scope.long], 11);
L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

当然,链接将替换为我的API密钥.我正在使用Leaflet的最新稳定版本,其中包含此代码修复程序,这是我能找到的最佳Google搜索结果.我的地图位于Bootstrap使用的标签内容中.这里有什么问题？或者我该怎么做才能调试这个？任何帮助将不胜感激,如果需要,我很乐意提供更多细节.