2

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

我知道如何使用$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 会丢失一些 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给定的OpenLayers.Popup.FramedCloud期望静态 html 内容字符串。

有什么想法吗？非常感谢。

4

2 回答 2

5

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

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 并针对范围对其进行编译，以使其绑定到您需要调用的方法。

于 2014-03-17T10:01:30.760 回答
0

我用传单

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) 注入到您的代码中。

于 2015-05-26T19:21:08.117 回答