Angular-leaflet-customive html with angular directives in a marker popup. How?

Question

I want to insert my custom html markup with $ scope event handlers into the flyer marker message property. For instance:

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 } 

So the doSomeAction () method does not start, because the controller does not bind it to the view. I tried to do 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); } 

But that will not work. Therefore, if anyone has ideas, feel free to share them.

Answer 1

Now you can easily use Angular templates in a pop-up message:

 var html = " <a href=''>info</a><button type='button' ng-click='doSomeAction()'>Choose</button>"; $scope.markers.push({ lat: ..., lng: ..., message: html, getMessageScope: function() {return $scope; } });