无法在每个 angular 模块中都有 ol3 映射

Question

我在 IE Edge 上使用 openlayers3 (ol3) 和 angular 1.5.6。

我有两个模块。每个都有自己的控制器和组件。每个控制器都希望在视图中有一张地图。一种视图用于交互式查询地图外的数据。另一个视图用于显示交互式查询结果。

在幕后，我提供了一个 MapFactory，它 returns 对象的一个实例，包含所述 openlayers 地图。

问题：一个显示，另一个不显示。

这是我的代码示例（为简单起见，省略了一些细节。例如依赖项注入检查。所有这些代码都按预期调用。）：

模块 A 定义

angular.module('ModuleA').controller('ModuleAController',ModuleAController);

ModuleAController.$inject = ['MapFactory'];
function ModuleAController(MapFactory){
    var vm = this;
    var vm.map = MapFactory.getMapInstance({
        id:'module-A-map',
        otherOption:true
    });
}

在模块A看来：

<div id='module-A-map' class="map-classes"></div>

模块 B 定义

angular.module('ModuleB').controller('ModuleBController',ModuleBController);

ModuleBController.$inject = ['MapFactory'];
function ModuleBController(MapFactory){
    var vm = this;
    var vm.map = MapFactory.getMapInstance({
        id:'module-B-map',
        otherOption:true
    });
}

在模块B看来：

<div id='module-B-map' class="map-classes"></div>

MapFactory 的定义：

angular.module('common').factory('MapFactory',MapFactory);

MapFactory.$inject = [];
function MapFactory(){
    var factory = {
        getMapInstance : getMapInstance
    };
    return factory;

    function getMapInstance(options){
        return new _MapConstructor(options);
    }

    function _MapConstructor(options){
        var _map = new ol.Map({
            target : options.id,
            logo : false,
            view : new ol.View({...}),
            layers : [some,layers,here]
        });

        return {
            publicMethod : publicMethod
        };

        function publicMethod(){...}

        function privateMethod(){...}

        ... other stuff ... 
    }
}

请让我知道是否需要任何澄清来回答这个问题。

更多： 这个问题：https://github.com/openlayers/ol3/issues/4601 可能是问题的一部分。我正在使用 bootstrap 的可折叠 DIV。 ModuleA是默认显示的，而ModuleB一开始是隐藏的。更多精彩。

我也将其写为 OL3 问题：https://github.com/openlayers/ol3/issues/5789

抽象答案：

http://getbootstrap.com/javascript/#collapse-events

我需要在 show.bs.collapse 或 shown.bs.collapse 事件上添加 _map.updateSize()。现在，我需要弄清楚如何在 Angular 和 post 中做到这一点（除非有人先得到它）。

Answer 1

啊，这是在Bootstrap的崩溃class。那么，让我们回到模块 B 视图。我的每个模块都是 Bootstrap 面板手风琴中的一个面板。显示的 ModuleA 地图是默认打开的面板（具有 in class 的面板）。 ModuleB地图默认是不打开的，所以OL3给了canvas一个display:none地图的div样式

<div id="module-B-collapse" class="panel-collapse collapse" >
    <div id='module-B-map' class="map-classes"></div>
    ....
</div>

在我的 ModuleBController 中，我简单地添加了：

angular.element('#module-B-collapse').on('shown.bs.collapse',function(){
    _map.updateSize();
});

无法在每个 angular 模块中都有 ol3 映射

Unable to have an ol3 map in each angular module

angularjs

twitter-bootstrap-3

openlayers-3