在onEachFeature函数中添加ng-click到leaflet弹出窗口

时间:2015-12-11 06:06:05

标签: javascript angularjs leaflet angular-leaflet-directive

我创建了地图并将其与我的geojson api连接。基本上我希望将每个标记弹出窗口与ng-click链接。 像这样放简单的html就不能完成这项工作,因为我必须编译它:

layer.bindPopup("<button ng-click='()'>+feature.properties.title+</button>");

这就是我想要做的。这是一大堆代码。我得到“错误:[ng:areq]参数'范围'是必需的 “

$http.get("http://markers.json").success(function(data, status) {
angular.extend($scope, {
geojson: {
  data: data,
  onEachFeature: function(feature, layer, scope) {
    var template = "<button class='button button-clear button-royal' ng-click='aa()')>" +feature.properties.title +"</button>";
    var linkFn = $compile(template);
    var content = linkFn(scope);
    layer.bindPopup(content);
 },
}
});
});

我对angular和js很新,所以我想我错过了一些明显而愚蠢的东西。谢谢!

1 个答案:

答案 0 :(得分:3)

您无需将scope作为参数添加到onEachFeature方法中。范围已在变量$scope中提供:

$http.get("http://markers.json").success(function(data, status) {
    angular.extend($scope, {
        geojson: {
            data: data,
            onEachFeature: function(feature, layer) {
                var template = "<button class='button button-clear button-small button-royal' ng-click='aa()'>" +feature.properties.title +"</button>";
                var linkFn = $compile(template);
                var content = linkFn($scope);
                layer.bindPopup(content[0]);
            }
        }
    });
});

示例:http://plnkr.co/edit/5cMWuhQeJLg5zkX9hVYK?p=preview