角葉指令自定義HTML彈出窗口

Question

我正在嘗試使用angular-leaflet-directive創建自定義彈出窗口。 我正在從leaflet.draw on：create事件打開彈出窗口。 這里：

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的邏輯，如下所示： https : //github.com/tombatossals/angular-leaflet-directive/issues/238綁定自定義彈出窗口

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

長話短說，除了彈出容器的大小無法正確調整以適應新內容之外，其他所有內容都可以正常工作。 高度似乎正確，但寬度已關閉。

我嘗試使用：

.leaflet-popup-content {
    width:auto !important;
}

這可能就足夠了，但是由於某種原因，這會導致彈出錨點移動到彈出窗口的左下角。 單擊地圖頂部附近時，AutoPan也會損壞。

有誰知道我可以在哪里以及如何觸發popup.update（）？ 我認為這就是需要發生的事情，但是我不知道在哪里實現。 我試過在layer.openPopup（）之后調用它，如下所示：

    onEachFeature(newGeoJsonFeat,layer);
    layer.openPopup();
    layer.getPopup().update();
});

但這似乎無濟於事。 任何幫助是極大的贊賞！

Answer 1

您需要使用“ leafletEvent”。 嘗試這個：

myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {

    // after all your crazy custom popup stuff ...
    leafletData.getMap().then(function(map) {
        layer.getPopup().update();
    });
}]);

Answer 2

我最終將圖像寬度存儲在GeoJson的屬性中，然后在bindPopup函數中將minWidth設置為該值。

layer.bindPopup(popupContent,{
  closeButton: true,
  closeOnClick: false,
  minWidth: feature.properties.width,
  autoPanPadding: L.point(20,20),
  keepInView: false,
  feature: feature
});