AngularJS OpenLayers指令-在AngularUI对话框中不起作用

我想在我的页面上使用-它工作正常，但当我将此指令放入

angular ui对话框时，它将不工作

我在控制台中看不到任何错误，任何想法都无法解释是什么导致了这一情况

示例用法：

<openlayers width="100px" height="100px"></openlayers>



带演示的Plnkr：

这是某种刷新/渲染问题。您可以在模式渲染后通过向DOM添加贴图来绕过它


HTML模板

<button class="btn btn-primary" 
        ng-click="demo.modal()">
        Open modal
</button>
<script type="text/ng-template" 
        id="modal.html">
  <div class="modal-header">
    <h3 class="modal-title">Modal window</h3>
  </div>
  <div class="modal-body">
    <openlayers width="100px" 
                height="100px" 
                ng-if="modal.rendered"> <!-- ng-if adds/removes DOM elements -->
    </openlayers>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" 
            ng-click="$dismiss()">
            Cancel
    </button>
  </div>
</script>

如果我将openlayers代码嵌入到页面中，我会看到模块注册错误，我认为这是可行的。请看这里的Plnkr：错误是由严格的Mime类型检查引起的，所以我只是尝试嵌入，看看是否可以进一步调试。是的，似乎只有在呈现承诺内调用它才能工作，谢谢！
angular.module('app', ['ui.bootstrap', 'openlayers-directive'])
.controller('demoController', function($q, $modal) {
  var demo = this;
  demo.modal = function() {
    $modal.open({
      controller: 'modalController',
      controllerAs: 'modal',
      templateUrl: 'modal.html'
    });
  };
})
.controller('modalController', function($modalInstance, $timeout) {
  var modal = this;
  modal.rendered = false;

  $modalInstance.rendered.then(function() { // magic here
    $timeout(function() {
      modal.rendered = true;
    });
  });
});