angular-leaflet-directive custom message html with angular directives in marker popup. How to?

angular-leaflet-directive, angularjs, javascript, leaflet

Solution

You can now easily use Angular templates in a popup 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; }
                    });

Problem

I want to insert my custom html markup with $scope event handlers to message property of leaflet marker. For 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 } ``` So doSomeAction() method doesn't triggers because controller doesn't bind it to view. I tried to do next stuff: ``` //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 it doesn't work. So if anyone has ideas please feel free to share.

Original source