如何在 angular-leaflet-directive 中的标记弹出窗口中显示指令

Question

我有一个传单指令，上面绘制了一堆标记。单击标记应该会打开一个包含大量控件和事件的消息框。我创建了一个名为 infowindow 的指令，它具有我需要的所有功能。

我这样创建一个标记：

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

这里我将指令传递给消息属性，当我运行时显示 < 内的所有 div。但是，我也想传递一个参数到infowindow的作用域，这样它就可以被编译了。

我试着用这段代码来做：

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

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

但是我无法完成这项工作，因为我收到一个错误 "Maximum call stack size exceeded"

我也试过在指令中隔离范围并将参数传递给范围，就像这样

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

这也不行。

任何人都可以帮助我如何让它工作，或者它是否可能？

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

userDetails 是一个包含用户详细信息的对象，用户由标记表示。

Answer 1

我想出了如何将对象传递给指令。我不确定这是否是最好的方法。但这有效。

我正在创建我的标记，并在消息属性中调用指令：

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

然后我将特定标记的自定义属性添加到范围并将范围传递给指令：

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

所以我的标记现在看起来像这样：

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

完整代码：

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

如何在 angular-leaflet-directive 中的标记弹出窗口中显示指令

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

javascript

angularjs

angular-leaflet-directive