How to display a directive in a Marker Popup in angular-leaflet-directive

Question

I have a leaflet-directive on which a plot a bunch of markers. Clicking on a marker should open a message box with a lot of controls and events. I have created a directive called infowindow which has all the functionality I need.

I create a marker like so:

var umarker = {
    lat: location.latitude,
    lng: location.longitude,
    draggable: false,
    message: "<infowindow></infowindow>",                        
};

Here I am passing the directive to the message attribute and when I run all the div inside < is displayed. However, I also want to pass a parameter to the scope of infowindow so it can be compiled.

I tried doing this with this code:

var contentString = '<infowindow></infowindow>';
var compiled = $compile(contentString)($scope);

var umarker = {
    lat: location.latitude,
    lng: location.longitude,
    draggable: false,
    message: compiled[0],
};

I am however not able to get this work as I am getting an error "Maximum call stack size exceeded"

I also tried isolating the scope in the directive and passing the parameters to the scope like so

'<infowindow user-details="' + userDetails + '"></infowindow>'

This does not work either.

Can anyone help me with how I can get this to work or if it is even possible?

http://jsfiddle.net/xgjdqds4/1/

userDetails is an object that has details about the user, who is represented by the marker.

Answer 1

I figured out how to pass the object to the directive. I'm not sure if this is the best way to do it. But this works.

I'm creating my marker, and calling a directive in the message attribute:

var marker = {
    lat: location.latitude,
    lng: location.longitude,
    draggable: false,
    message: "<infowindow></infowindow>",                        
};

Then I add the custom attributes for the specific marker to the scope and pass the scope to the directive:

getMessageScope: function () {
    var infowindowScope = $scope.$new(true);
    infowindowScope.userDetails = lu;
    return infowindowScope;
},

So my marker now looks like this:

marker = {
    lat: location.latitude,
    lng: location.longitude,
    draggable: false,
    getMessageScope: function () {
        var infowindowScope = $scope.$new(true);
        infowindowScope.userDetails = lu;
        return infowindowScope;
    },
    message: '<infowindow></infowindow>',
};

The complete code:

_.forEach(locatedUsers, function (lu) {
    var umarker = {
        lat: lu.location.latitude,
        lng: lu.location.longitude,
        draggable: false,
        getMessageScope: function () {
            var infowindowScope = $scope.$new(true);
            infowindowScope.userDetails = lu;
            return infowindowScope;
        },
        message: '<infowindow></infowindow>',
    };
    $scope.markers['user_' + lu.id] = umarker;
});