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

您的问题来自您正在手动创建一些 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]

并传递给传单

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

大功告成！

有关详细信息，请参阅编译器文档。

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

您可以在 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; },          
});

我发现这个答案对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);

启用 ng 单击弹出窗口(地图框(

我研究了这种特殊类型的问题，以实例化针对弹出窗口内的单击的函数。我正在使用角度传单指令，我无法进行$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);
}

所以我不得不在 angular 中使用传统的 javascript 来避免循环链接的复杂性。

我这个话题有点晚了，但我也有类似的情况，想分享我的解决方案。

假设您有一些要添加到弹出窗口中的 html，只需在其中添加一个"id"。

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

我之所以写这篇文章，是因为我正在 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
};

希望这能有所帮助！