Make marker message/label clickable?

[wootwoot1234]

I'm trying to make my marker popups clickable. When I use html in the marker popup the html is rendered correctly but ng-click doesn't work. Here's what I have.

 $scope.map.markers.push({
    lat: lat,
    lng: lng,
    message: '<span ng-click="openView()">' + data.results[i].locationName + '</span>',
    draggable: false
});

Anyone know what I'm doing wrong or know how to call a function when the marker popup is clicked?

[tombatossals]

Hi, you have to compile the message as it contains dynamic HTML, so it must be re-parsed by angular.

Take a look at threads on stackoverflow.com talking about this. There's must be an easy way for sure:

http://stackoverflow.com/questions/19845950/angularjs-how-to-dynamically-add-html-and-bind-to-controller
http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database

Hope it helps.

[wootwoot1234]

I'll check out the links and thanks for answering both of my last two posts!

Am I approaching this problem incorrectly? All I want to do is to make the marker's label clickable. Seems like something that other people would want too, right?

[nicolaspayot]

Hi,

In case someone's looking for a solution to this issue:

// Here we are manually creating DOM that is not compiled by AngularJS
var title = '<span><a ng-click="hello()">' + Hello, World! + '</a> - <b>item1</b><br />item2</span>';

// Compile title DOM into a link function
var linkFn = $compile(angular.element(title));
// Return a jQuery DOM tree fully controlled by AngularJS so that ng directives will work
var popup = linkFn(scope);

var mark = L.marker(new L.LatLng(item.lat, item.lng));
// We can only display a DOM node (bug with leaflet?) so this is why we use <span>...</span> as a parent node
mark.bindPopup(popup[0]);
...
scope.hello = function() {
    alert('Hello, World!');
};

The ng-click directive's working now!

[nmccready]

This issue was moved to angular-ui/ui-leaflet#20

[tombatossals]

I'm going to rework&redesign angular-leaflet-directive to be compatible with Leaflet v1.0. It will mantain almost all its functionality, and will be compatible with the current features of the directive, but I must start from a fresh point, so I'm going to close this issue. If you think it must be worked with the new version, please reopen it.

[tuncagurkan]

I think this is easiest way: http://stackoverflow.com/a/27935131/2742162