Angular js resize Openlayers 3 watch関数からのマップ

Question

ユーザーがブラウザのサイズを変更したときに時計機能を使用してサイズを変更する必要があるOpenlayers 3マップがあります。地図が最初に読み込まれるとき、マップは垂直に伸びますが、ブラウザのサイズを変更すると正しいです。

私が最初にcanvas要素を点検するとき、それは示しています

<canvas class="ol-unselectable" style="width: 100%; height: 100%;" width="1086" height="1004"></canvas> 

私はマップを呼び出すにポイントを見つけることができるすべての情報を：

<canvas class="ol-unselectable" style="width: 100%; height: 100%;" width="1090" height="550"></canvas> 

はその後、サイズ変更後にそれが正しいサイズに応答します。 updateSize（）;これは機能しないようで、高さの値は変化していないようです。どんな助けもありがとう。

wmm.directive('tchOlMap', ['$window', function ($window) { 

var MAP_DOM_ELEMENT_ID = 'tchMap'; 

return { 
    //restrict: 'E', 
    scope: false, 
    //replace: true, 

    template: '<div id="' + MAP_DOM_ELEMENT_ID +'" class="full-height" ng-style="mStyle"></div>', 

    link: function postLink(scope, element, attrs) { 
     scope.style = {}; 


     // these functions set the map and other divs to the size of the browser dynamically 
     var w = angular.element($window);     

     scope.getWindowDimensions = function() { 
     return { 'h': w.height(), 'w': w.width() }; 
     }; 


     scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) { 

     scope.mStyle = { 
       'height': (newValue.h - 102) + 'px', 
       'width': '100%' 
      }; 


      console.log('new height '+newValue.h); 
      console.log('old height '+newValue.h); 

      console.log(map.getSize()); 
      map.updateSize(); 

    }, true); 

私は次のように適用されます$使用して試してみましたが、これは

scope.$apply(function() { 
        map.updateSize(); 
       }); 

Answer 1

は以下のコードを使用して動作しません。 setTimeout（）関数内のmap.updateSize（）関数を値200msで呼び出しています。このスクリプトをロードした後、200ms後にmap.updateSize（）が実行され、マップがブラウザにロードされます。

window.onload = function（）{setTimeout（function（）{map.updateSize（）;}、200 ）; }