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", '$pile', 'leafletMarkersHelpers',
function($scope, leafletEvents, $pile, 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);
    $pile(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.

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", '$pile', 'leafletMarkersHelpers',
function($scope, leafletEvents, $pile, 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);
    $pile(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.

• javascript
• angularjs
• leaflet
• angular-leaflet-directive

• It is unclear if your code excerpts belong to a directive and/or a controller. Please be more specific. – Christian Bonato Commented May 31, 2014 at 13:44
• @Bonatoc , corrected. And I want to mention that everything works ok except button in marker popup that doesn't responce on click... – Eugene Commented May 31, 2014 at 13:56
• I'm not an Angular specialist, but I think what you need in the present case is a directive. google.fr/… – Christian Bonato Commented May 31, 2014 at 14:59
• 1 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 = $pile(angular.element(html)), linkedDOM = linkFunction($scope); $container.append(linkedDOM); – Eugene Commented May 31, 2014 at 18:02
• You could try $scope.$apply(function () { $pile(html)($scope);}); instead of $scope.$digest(); – Bwyss Commented Nov 17, 2015 at 8:45

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