Question

我正在使用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);
};

但是我现在正在努力处理事件处理程序，如果我将template更改为（注意输入和范围后的ng-click）：

var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";

并在$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);

此代码段完美按预期工作（ng-click也适用于此处）。这两种用法之间的唯一区别是：content和content.html()。

但鉴于content需要静态html内容字符串，我无法使用OpenLayers.Popup.FramedCloud。

有关于此的任何想法？非常感谢你。

Answer 1

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

var template = "<div><span>{{halo}}</span><button ng-click='call()'>call</button></div>";
var popup = new OpenLayers.Popup.FramedCloud("popup", new OpenLayers.LonLat(103.83641, 1.35578), null, template, null, true);
map.addPopup(popup);
var pp = angular.element(document.querySelector('#popup'));
$compile(pp)($scope);

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

Answer 2

我使用传单

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

创建Scope对象

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

将HTML解析为DOM元素

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

不要忘记在您的代码中注入（$ compile）。

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

2 个答案: