Question

我正在使用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应该发送特定对象和对象数组的功能，但是当我点击图标时没有任何反应。在我的研究中，我发现弹出窗口阻止了事件传播（more info，但我不知道如何覆盖它或修复它以使其与角度一起工作。有人会知道如何实现这一点吗？ / p>

更新：

由于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>

然而，当我点击图标时，没有任何事情发生，并且它看起来不像正在调用的功能。任何人都知道为什么会发生这种情况？

Answer 1

您的问题来自于您手动创建一些DOM，而这些DOM并非由AngularJS编译。

在这些情况下，您必须手动编译和链接元素。

代码如下所示：

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而不是字符串。

angular.element(html)

然后，我使用$ compile服务将这个DOM编译成链接函数。

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

执行时，此函数将返回一个完全由Angular控制的jQuery DOM树，在您作为参数提供给它的作用域中运行。这就是我在这里做的事情

linkFunction(newScope)

请注意，我给出的范围是$ scope的子范围。如果不这样做，你将在所有弹出窗口之间共享相同的范围，这不是一个好主意。创建新范围是在var声明

中完成的

newScope = $scope.$new()

从中你可以获得实际的DOM节点

linkFunction(scope)[0]

并将其传递给Leaflet

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

你已经完成了！

有关详细信息，请参阅compiler文档。

编辑：纠正了有关范围的问题

Answer 2

您可以在angular-leaflet-directive中使用对Angular内容的新支持：

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

... 

$scope.markers.push( { lat: ...,
                       lng: ...,
                       message: html,
                       getMessageScope: function() { return $scope; },          
});

Answer 3

我研究了这种特殊类型的问题，以实例化针对弹出窗口内的点击的功能。我正在使用angular-leaflet-directive，我无法进行$ compile，因为它已经在$ compile中，并且会创建一个循环引用。我做的是以下。

$scope.markers[$scope.asset_table[imc]['asset']['_id']['$oid']]={
                        lat:$scope.asset_table[imc]['last_data']['loc']['coordinates'][1],
                        lng:$scope.asset_table[imc]['last_data']['loc']['coordinates'][0],
                        focus:true,
                        message:"<h4>"+$scope.asset_table[imc]['asset']['name']+"</h4>
                        <span class='btn btn-danger' 
                        onclick='detailView()';>View Details</span>",
                        //message: linkFunction, /*I discarded this as it was creating circular reference*/
                        icon: {
                            iconUrl: $scope.icon,
                            iconSize: [30, 30],
                            iconAnchor: [15, 15],
                            popupAnchor: [0, 0],
                            shadowUrl: $scope.icon,
                            shadowSize:[0,0],
                            iconAngle:$scope.asset_table[imc]['last_data']['bearing']
                        }
                    };

在此之下，函数viewDetail（）被称为

detailView = function(){
    //alert("Test");
    $rootScope.$broadcast('asset.details',$scope.asset_table);
}

所以我不得不在角度内部使用传统的javascript来避免循环链接的复杂性。

Answer 4

我对这个主题有点迟了，但我遇到了类似的情况，想要分享我的解决方案。

假设您要在弹出窗口中添加一些html，只需添加一个＆＃39; id＆＃39;进入它。

var html = '<a id="popup" href="" ng-model="featureSelected" ng-click="cherryPickPin(featureSelected)">cherry pick this pin</a>';

现在您需要做的就是：

var popupElement = $('#popup'); // grab the element (make sure that it exists in the DOM)
popupElement = $compile(popupElement)($scope); // let angular know about it

Answer 5

我到达这篇文章是因为我在 Ionic / Cordova（移动应用上的地图集成）上寻找此问题的解决方案。

问题在于$ compute函数似乎不起作用，因为它使用精简版jQuery运行。因此，使用它的唯一方法，也是最简单的方法是使用David提出的代码（非常感谢你的配偶！）。

在我的代码中，它看起来像这样：

$scope.map.markers[i] = {
    lat: parseFloat(place.latitude),
    lng: parseFloat(place.longitude),
    message: htmlPopupContent,
    getMessageScope: function() { return $scope; },
    focus: true,
    draggable: false
};

希望这有帮助！

Answer 6

我找到了mapbox-gl-js和angular的答案帮助：

var html = '<button ng-click="fn()">Click Me</button>';
var compiledHtml = $compile(html)($scope);
var popup = new mapboxgl.Popup()
 .setLngLat([-91.874, 42.760])
 .setDOMContent(compiledHtml[0])
 .addTo(map);

Enable ng-click on a popup (mapbox)

如何在Leaflet标记弹出窗口中使用Angular指令ng-click和ng-class

6 个答案: