Buttons inside marker popup

[pratham2003]

Hi,

I'm trying to add buttons inside the marker popup and bind them to a function. Its a GeoJSON layer. I've tried the following but it results in the error [ Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. ]

I'm using jQuery too.

onEachFeature: function(feature, layer) {
  var msg += '<div>...<div class="right"></div></div>';
  var buttonHtml = '<button class="play-button button button-icon button-clear ion-play" style="color:" #FCD5B5"></button>';
  var button = $(buttonHtml).on('click', $scope.handleMarkerClick);
  var compiledMsg = $('.right', $(msg)).append(button);
  layer.bindPopup(compiledMsg);
}

The function needs to be able to access the feature object to show relevant data of the maker from the GeoJSON data on clicking the button.

Is there a better way to do this? Any hints would be appreciated too.

[ghost]

I am using the following approach: When you create marker add:

getMessageScope: function () {
var markerScope = $scope.$new(true);
markerScope.something = 1;

For messageyou must set template via ngIncludedirective like in this example: http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/markers/angular-template-example Inside marker scope you can define all standard things variable, functions etc. Inside template you can create popup view to look like what ever you like - button, link etc.