Angular Leaflet DirectiveをAngular Material Design内で正しくレンダリングするにはどうすればよいですか？

Question

Angular Leaflet Directiveは、親コンテナのサイズを調べて、サーバーからマップ画像タイルを要求する前の正しいサイズを判断します。 Angular Material Designは、flexbox CSSプロパティを使用してコンテナの動的な幅と高さを設定します。

問題はリーフレットが親を調べ、幅と高さが0であることを発見します。ここにはほぼ解決策があるissue queue question on the problemがあります。

（私はすでに答えを持っている。ただ、共有を。）

Answer 1

私は、コンパイル時leafletディレクティブに角度素材flex属性を追加するディレクティブを作成しました。これにより、コンテナの幅は100％になります。次に、Mapオブジェクトがレンダリングを終了したときに呼び出されるLeafletから約束を得ます。リーフレットに、親コンテナのこの時点で正しく設定されているサイズを確認させるメソッドmap::invalidateSize()が呼び出されます。

(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 tt-leaflet-flex-fit></leaflet>