Javascript 角度传单指令自定义HTML弹出窗口
我试图在使用angular传单指令时创建自定义弹出窗口。我正在打开传单上的弹出窗口。绘图:创建事件。在这里:Javascript 角度传单指令自定义HTML弹出窗口,javascript,angularjs,popup,leaflet,angular-leaflet-directive,Javascript,Angularjs,Popup,Leaflet,Angular Leaflet Directive,我试图在使用angular传单指令时创建自定义弹出窗口。我正在打开传单上的弹出窗口。绘图:创建事件。在这里: map.on('draw:created', function(e) { layer = e.layer; drawnItems.addLayer(layer); var newComment = "Enter Comment"; var newID = "ID"; var newGeoJsonFeat = layer.toGeoJSON();
map.on('draw:created', function(e) {
layer = e.layer;
drawnItems.addLayer(layer);
var newComment = "Enter Comment";
var newID = "ID";
var newGeoJsonFeat = layer.toGeoJSON();
newGeoJsonFeat.properties = {"comment":newComment, "id":newID};
console.log(newGeoJsonFeat);
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
});
然后我使用@blackjid的逻辑,如图所示:绑定自定义弹出窗口
function onEachFeature(feature, layer) {
// Create get the view template
var popupContent = '<div ng-include="\'partials/popup_newfeat.html\'"></div>';
console.log("assigning popup");
// Bind the popup
// HACK: I have added the stream in the popup options
layer.bindPopup(popupContent,{
closeButton: false,
maxHeight: 300,
feature: feature
});
};
$scope.$on('leafletDirectiveMap.popupopen', function(event, leafletEvent){
// Create the popup view when is opened
var feature = leafletEvent.leafletEvent.popup.options.feature;
var newScope = $scope.$new();
newScope.stream = feature;
$compile(leafletEvent.leafletEvent.popup._contentNode)(newScope);
});
这可能就足够了,但由于某种原因,这会导致弹出锚移到弹出窗口的左下角。在地图顶部附近单击时,自动扫描也会中断
有人知道我在哪里以及如何启动popup.update()吗?我相信这是需要发生的,但我不知道在哪里实施它。我尝试在layer.openPopup()之后调用它,如下所示:
但这似乎没有任何作用。非常感谢您的帮助 您需要使用“传单事件”。试试这个:
myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {
// after all your crazy custom popup stuff ...
leafletData.getMap().then(function(map) {
layer.getPopup().update();
});
}]);
最后,我将图像宽度存储在GeoJson的属性中,然后在bindPopup函数中将minWidth设置为该值
layer.bindPopup(popupContent,{
closeButton: true,
closeOnClick: false,
minWidth: feature.properties.width,
autoPanPadding: L.point(20,20),
keepInView: false,
feature: feature
});
myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {
// after all your crazy custom popup stuff ...
leafletData.getMap().then(function(map) {
layer.getPopup().update();
});
}]);
layer.bindPopup(popupContent,{
closeButton: true,
closeOnClick: false,
minWidth: feature.properties.width,
autoPanPadding: L.point(20,20),
keepInView: false,
feature: feature
});