jqWidget内的传单映射导致灰色磁贴

Question

我正在使用带有jqwidgets的angularjs作为UI框架和带有angular-leaflet-directive的传单。 当我尝试将传单映射放入jqDockingLayout / jqRibbon时，传单的maptiles没有正确显示（灰色背景而不是tile）。

这是我准备的最小的Plunker：https://plnkr.co/edit/NrvXojEmKqA7PuIhDHTM

我尝试在文档准备好之后和/或创建jqxDockingLayout之后调用map.invalidateSize();。我也尝试手动将leaflet包装在我自己的指令中但没有成功。

令人感兴趣的是，如果我通过jQuery手动创建传单地图，如jqxDockingLayout中的leafet quick-start中所述，或者如果我将angular-leaflet-directive放入jqxDockingLayout之外的div中，一切正常。

也许相关：

• Map based on Leaflet and AngularJS not loaded correctly

感谢您的努力。

EDIT1：我通过在控制器内手动编译地图找到了一种解决方法，该控制器另外注入了$compile和$element。然后它看起来像这样：

demoApp.controller("demoController", [
...
$scope.settings = {
  width: 500,
  height: 500,
  layout: layout,
  created : function () {
    // Initialize Directives inside
    var x = angular.element( '<leaflet width="100%" height="100%"></leaflet>' );
    $element.find('#mapContainer').append( x );
    $compile( x )( $scope );
  }
};
...
]);

与地图的交互有效，但它不是角度方式，因为我操纵控制器内的DOM，我认为它不是初始化所有内部指令的正确位置。此外，像lf-center这样的指令不再起作用了。