[英]angular-leaflet-directive custom message html with angular directives in marker popup. How to?
[英]How to display a directive in a Marker Popup in angular-leaflet-directive
我有一个传单指示,上面有一堆标记。 单击标记应打开一个包含许多控件和事件的消息框。 我创建了一个名为infowindow的指令,该指令具有我需要的所有功能。
我这样创建一个标记:
var umarker = {
lat: location.latitude,
lng: location.longitude,
draggable: false,
message: "<infowindow></infowindow>",
};
在这里,我将指令传递给message属性,当我运行<内的所有div时,将显示。 但是,我也想将参数传递给infowindow的范围,以便可以对其进行编译。
我尝试使用以下代码执行此操作:
var contentString = '<infowindow></infowindow>';
var compiled = $compile(contentString)($scope);
var umarker = {
lat: location.latitude,
lng: location.longitude,
draggable: false,
message: compiled[0],
};
但是,由于出现错误“超出了最大调用堆栈大小”,因此无法进行此工作
我还尝试隔离指令中的范围,并将参数传递给范围,如下所示
'<infowindow user-details="' + userDetails + '"></infowindow>'
这也不起作用。
谁能帮我解决这个问题,甚至可以解决?
http://jsfiddle.net/xgjdqds4/1/
userDetails是具有有关用户详细信息的对象,该用户由标记表示。
我想出了如何将对象传递给指令。 我不确定这是否是最好的方法。 但这有效。
我正在创建标记,并在message属性中调用指令:
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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.