[英]Angular leaflet marker click
我使用带角度的传单,并希望在消息弹出窗口中使按钮可单击。 我知道我必须编译HTML,但是由于没有找到带有json-request的示例,因此我无法使其正常工作。
任何提示都非常欢迎!
$http.get(searchterm).then(function(articlesResponse) {
$scope.geonamesorte = articlesResponse.data;
var meineMarker = {};
for ( var i = 0; i < $scope.geonamesorte.length; i++) {
var ortObjektausListe = $scope.geonamesorte[i];
var myobjectname = ortObjektausListe.name.replace(/[^a-zA-Z0-9]/g,'_');
ortlat = parseFloat(ortObjektausListe.lat);
ortlng = parseFloat(ortObjektausListe.lng);
meineMarker[myobjectname+i] = {
lat: ortlat,
lng: ortlng,
message: "<span><a href='' ng-click='dosomething()''>info</a></span>",
focus: false,
draggable: false
};
}
// Marker on map
angular.extend($scope, {
markers: meineMarker,
defaults:{
tileLayer:"http://tile.stamen.com/toner-lite/{z}/{x}/{y}.png"
}
});
});
好的,在这里找到解决方案: 在标记弹出窗口中使用angular指令的angular-leaflet-directive自定义消息html。 如何?
但是修改了一下:
var myobjectname = 'meinort';
var meineMarker = {};
meineMarker[myobjectname] = {
lat: 0,
lng: 0,
name: 'testname',
message: "<span><a href='' ng-click='dosomething()'>info</a></span>",
focus: false,
draggable: false
};
$scope.$on('leafletDirectiveMarker.click', function(e, args) {
// Args will contain the marker name and other relevant information
console.log(args);
var markerName = args.leafletEvent.target.options.name; //has to be set above
var $container = $(args.leafletEvent.target._popup._container).find('.leaflet-popup- content');
$container.empty();
var html = "<p> I am "+markerName +" " + args.leafletEvent.target._popup._content + "</p>",
linkFunction = $compile(angular.element(html)),
linkedDOM = linkFunction($scope);
$container.append(linkedDOM);
});
在控制器中包含$ compile服务,然后编写:
meineMarker[myobjectname+i] = {
lat: ortlat,
lng: ortlng,
message: $compile("<span><a href='' ng-click='dosomething()''>info</a></span>")($scope),
focus: false,
draggable: false
};
必须在当前作用域上定义dosomething()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.