如何讓Angular Leaflet指令在角度材質設計中正確渲染？

Question

Angular Leaflet Directive查看父容器的尺寸，以確定在它向服務器請求地圖圖像切片之前其正確尺寸的大小。 Angular Material Design使用flexbox CSS屬性設置容器的動態寬度和高度。

問題是傳單查找父，並發現0和0的寬度和高度。這是一個issue queue question on the problem幾乎解決方案。

（我已經有答案了。只是共享。）

Answer 1

我創建了一個指令，增加了折角材料flex屬性在編譯的leaflet指令。這使容器寬度達到100％。然後從地圖對象完成渲染時調用的Leaflet獲得承諾。調用方法map::invalidateSize()將強制Leaflet檢查在父容器的此點正確設置的大小。

(function() { 
    angular.module('live') 
     .directive('ttLeafletFlexFit', leafletFlexFit); 

    leafletFlexFit.$inject = ['$timeout', 'leafletData']; 

    function leafletFlexFit($timeout, leafletData) { 
     var directive = { 
      restrict: 'A', 
      compile: compile 
     }; 

     return directive; 

     function compile(tElem, attrs) { 
      tElem.attr('flex', ''); 

      // A hack to get Leaflet to fill the flex container. 
      // @link https://github.com/tombatossals/angular-leaflet-directive/issues/950 
      leafletData.getMap().then(function (map) { 
       $timeout(function() {map.invalidateSize()}); 
      }); 
     } 
    } 
})(); 

然後在leaflet指令元素上添加一個屬性。

<leaflet tt-leaflet-flex-fit></leaflet>