I'm looking to add my own custom HTML markup with $scope event handlers to the message property of a Leaflet marker. Here's an example:
App.controller('testController', ['$scope', "leafletEvents", '$compile', 'leafletMarkersHelpers',
function($scope, leafletEvents, $compile, leafletMarkersHelpers){
angular.extend($scope, {
currentLocation : {
lat: 20,
lng: 20,
zoom: 20
},
markers: {
},
defaults: {
scrollWheelZoom: true
},
events: {
map: {
enable: ['zoomstart', 'drag', 'click', 'mousemove', 'popupopen'],
logic: 'emit'
},
markers: {
enable: leafletEvents.getAvailableMarkerEvents()
}
}
});
var html = " <a href=''>info</a><button type='button' ng-click='doSomeAction()'>Choose</button>";
var item = {...}; //some data for marker
$scope.markers["newMarker"] = {
lat: item.lat,
lng: item.lng,
message: item.message + html,
draggable: false
}
However, the doSomeAction() method isn't triggering because it isn't properly bound to the view within the controller. I've attempted the following:
//this code belongs to the same controller
//data.leafletEvent.popup._content html set for popup message before.
$scope.$on('leafletDirectiveMap.popupopen', function(event, data){
var html = "<p>" + data.leafletEvent.popup._content + "</p>";
var template = angular.element(html);
$compile(html)($scope);
$scope.$digest();
});
$scope.doSomeAction = function() {
//never fires
console.log(arguments);
}
Unfortunately, this approach hasn't worked. If anyone has any suggestions or ideas, please share them.