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

Question

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.

Durand

It is unclear if your code excerpts belong to a directive and/or a controller. Please be more specific. – Gladiate

@Bonatoc , corrected. And I want to mention that everything works ok except button in marker popup that doesn't responce on click... – Durand

I'm not an Angular specialist, but I think what you need in the present case is a directive. google.fr/… – Gladiate

I have added next code to leafletDirectiveMap.popupopen callback and now it works as expected var $container = $(data.leafletEvent.popup._container).find('.leaflet-popup-content'); $container.empty(); var html = "<p>" + data.leafletEvent.popup._content + "</p>", linkFunction = $compile(angular.element(html)), linkedDOM = linkFunction($scope); $container.append(linkedDOM); – Durand

You could try $scope.$apply(function () { $compile(html)($scope);}); instead of $scope.$digest(); – Perfect

Answer 1

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; }
                    });

Arteriole

This works really well! I wonder why there's no example on the site... However, compileMessage might also have to be set to true in the object you pass to the push method in the latest version of the plugin. Also, this only works for markers and not paths etc. – Lorenzoloresz