Jquery 在AngularJS中动态编译HTML代码段时如何绑定事件处理程序

我正在使用OpenLayers和AngularJS，一切都很顺利，直到我最终开始触摸弹出功能

我知道如何使用

$compile

服务使动态内容通过以下方式显示在弹出窗口中：

$scope.data = {
    text: "Dynamic content"
};

var template = "<div><span>{{data.text}}</span></div>";

$scope.showPopup = function() {
    var content = $compile(template)($scope);

    var lonlat = "-5694.06868525478, 6708925.0877411375";
    $timeout(function() {
        var popup = new OpenLayers.Popup.FramedCloud("popup",
            OpenLayers.LonLat.fromString(lonlat),
            null,
            content.html(),
            null,
            true
        );

        map.addPopup(popup);
    }, 0);
};

并在

$scope

中定义事件处理程序：

$scope.func = function() {
    console.log("Hello, world");
};

但事件无法触发。我非常怀疑使用

content.html（）

会丢失angularjs关心的一些重要信息。当我尝试以下代码时：

    var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";
    var content = $compile(template)($scope);
    angular.element("#footer").append(content);

var-template=“{{data.text}}”；
var content=$compile（模板）（$scope）；
元素（“#页脚”）.append（内容）；

这段代码完全符合预期（ng click也适用于此处）。这两种用法之间的唯一区别是：

content

和

content.html（）

但是我不能使用

content

，因为

OpenLayers.Popup.FramedCloud

需要一个静态html内容字符串

有什么想法吗？

---

非常感谢。

我遇到了同样的问题，花了3天时间找到了解决方案。最后我发现解决方案是在将弹出窗口添加到映射后调用$compile函数。看这把小提琴。

var-template=“{{halo}}}call”；
var popup=new OpenLayers.popup.FramedCloud（“popup”，new OpenLayers.LonLat（103.83641，1.35578），null，template，null，true）；
map.addPopup（弹出窗口）；
var pp=angular.element（document.querySelector（'#popup'）；
$compile（pp）（$scope）；

将弹出窗口添加到地图后，将创建一个新的dom。使用Angularjs的jqlite，我们可以获得dom并根据作用域进行编译，使其绑定到需要调用的方法。

我使用传单

var map = L.map('div-map');                    
// ...                   

创建范围对象

var newScope = $scope.$new();

newScope.object = someObject;

newScope.myfunction = function(){ console.log("Testing")}

您的html字符串

var html =  
'<div><p><strong>ID : </strong>{{object.userId}}</p>'+
'<p><strong>Name : </strong>{{object.firstName}} {{object.lastName}}</p>'+
'<button class="btn btn-default" ng-click="myfunction()">Call My Function</button></div>';

编译模板

var linkFn = $compile(template); 

将编译后的模板与作用域链接

var element = linkFn(newScope);

var marker = L.marker(
   [ object.latitude, object.longitude],
   {icon: -someIcon-}
)
.bindPopup( element[0]);

map.addLayer(marker); 

---

不要忘记将（$compile）注入到代码中。

也许这不是关于编译本身，这里的主要内容是关于

content

和

content.html（）。如何获取包含元素本身的元素的内容
content.html（）
不起作用（它只返回元素的内容）。
var template = angular.element(html);

var linkFn = $compile(template); 

var element = linkFn(newScope);

var marker = L.marker(
   [ object.latitude, object.longitude],
   {icon: -someIcon-}
)
.bindPopup( element[0]);

map.addLayer(marker);