如何让 Angular Leaflet Directive 在 Angular Material Design 中正确渲染？

Question

Angular Leaflet Directive 在从服务器发出地图图像切片请求之前，会查看父容器的尺寸以确定其正确大小。 Angular Material Design 使用 flexbox CSS 属性来设置容器的动态宽度和高度。

问题是 Leaflet 查找父级并发现宽度和高度为 0 0。这是一个 issue queue question on the problem 几乎可以解决问题。

（我已经有了答案。只是分享。）

Answer 1

我创建了一个指令，在编译时将 Angular Material 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 tt-leaflet-flex-fit></leaflet>