Javascript jqWidget内部的传单地图，生成灰色瓷砖

我使用angularjs和jqwidgets作为UI框架，使用angular传单指令作为传单。 当我尝试将传单地图放入jqDockingLayout/jqRibbon时，传单的地图分幅显示不正确（灰色背景而不是分幅）

这是我准备的一个最简单的扑克牌：

我试图调用

map.invalidateSize（）在文档准备就绪和/或创建jqxDockingLayout之后。我还试图用我自己的指令手动包装传单，但没有成功

有趣的是，如果我按照jqxDockingLayout中的Leavet quick start中的描述，通过jQuery手动创建一个传单映射，或者如果我将angular传单指令放入jqxDockingLayout之外的一个div中，一切正常

可能相关：




谢谢你的努力

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

demoApp.controller（“demoController”[
...
$scope.settings={
宽度：500，
身高：500，
布局：布局，
已创建：函数（）{
//在内部初始化指令
var x=角度元素（“”）；
$element.find（“#mapContainer”）.append（x）；
$compile（x）（$scope）；
}
};
...
]);

与映射的交互是有效的，但这不是角度方式，因为我在控制器内操作DOM，我认为它不是初始化所有内部指令的正确位置。此外，像
lf center
这样的指令不再起作用。
玩弄你的Plunker，首先你忘了在指令上设置
center
属性。如果设置它，它会显示一个小平铺。第二，地图没有任何反应，它死了。添加单击/拖动事件将不起作用，ZoomControl会响应悬停但不会单击，这使我怀疑您的面板或选项卡正在干扰L.Map实例。我已经查阅了JQX的文档，尝试了一些方法，但没有任何效果。很抱歉，我对JQX一无所知，所以我无法进一步帮助您。我只是想分享我的发现。祝你好运感谢您分享您的发现。我相应地编辑了plunker（添加了一个lf中心）。玩你的plunker时，首先你忘了在指令上设置
center
属性。如果设置它，它会显示一个小平铺。第二，地图没有任何反应，它死了。添加单击/拖动事件将不起作用，ZoomControl会响应悬停但不会单击，这使我怀疑您的面板或选项卡正在干扰L.Map实例。我已经查阅了JQX的文档，尝试了一些方法，但没有任何效果。很抱歉，我对JQX一无所知，所以我无法进一步帮助您。我只是想分享我的发现。祝你好运感谢您分享您的发现。我相应地编辑了plunker（添加了一个lf中心）。