各角度モジュールにol3マップがありません

Question

IE Edgeでopenlayers3（ol3）とangular 1.5.6を使用しています。

私は2つのモジュールを持っています。それぞれには独自のコントローラとコンポーネントがあります。各コントローラは、ビュー内にマップを持っています。 1つのビューは、マップからデータを対話形式で照会するためのビューです。もう1つのビューは、対話型照会結果を表示するためのビューです。

フードの下で、私は上記のopenlayersマップを含むオブジェクトのインスタンスを返すMapFactoryを提供します。

問題：もう一方は表示されません。

ここに私のコードのサンプルです（いくつかの詳細を簡単にするために省略されている例えば、依存性の注入チェックは予想通り、このコードのすべてが呼び出されている。。。）：

モジュール定義

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

ModuleAの見解で

：

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

モジュールBの定義

ModuleBの見解で

：

<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がこの問題の一部である可能性があります。私はブートストラップで折りたたみ可能なDIVを使用しています。 ModuleAはデフォルトで表示され、ModuleBは最初は非表示になっています。もっと来る。私もOL3の問題としてこれを書いた

：https://github.com/openlayers/ol3/issues/5789

ABSTRACT ANSWER：

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

を私はshow.bs.collapseまたはshown.bs.collapseイベントに_map.updateSize()を追加する必要があります。さて、私はAngularでそれを行う方法を理解し、それを投稿する必要があります（誰かが最初にそれを取得しない限り）。

Answer 1

ああ、これはブートストラップの折りたたみクラスです。そこで、Module-Bビューに戻ってみましょう。私の各モジュールはBootstrapパネルの中のパネルです。表示されるModuleAマップは、デフォルトのオープンパネル（inクラスを持つパネル）です。 ModuleBマップはデフォルトでは開いていないため、OL3はキャンバスにマップのdivスタイルでdisplay:noneを与えます。私ModuleBControllerで

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

は、私は単に追加：

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