AngularJS OpenLayers 指令 - 在 angular-ui-dialog 中不起作用

Question

我想在我的页面上使用 AngularJS OpenLayers directive - 它工作正常，但是当我将此指令放入 angular-ui-dialog 时它不会工作。

我在控制台中看不到任何错误，知道是什么原因造成的吗？

示例用法：

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

Plnkr 演示：

http://plnkr.co/edit/YSfcKaTmNsSpkvSI6wt7?p=preview

Answer 1

这是某种 refreshing/rendering 问题。您可以通过在呈现模态后将地图添加到 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>

JavaScript

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

AngularJS OpenLayers 指令 - 在 angular-ui-dialog 中不起作用

AngularJS OpenLayers directive - does not work within angular-ui-dialog

openlayers

angularjs