Question

我的Angular应用程序中存在明显的内存泄漏，无论我使用以下传单指令：https://github.com/tombatossals/angular-leaflet-directive。

请注意，该指令工作正常，但是当我离开并使用该指令返回任何视图时，内存占用量继续增长。

该指令建立在这里找到的传单javascript库：https://github.com/Leaflet/Leaflet

我使用指令如下：

<div ng-controller="Explore">
    <div leaflet defaults="defaults" center="center" markers="markers" layers="layers"></div>
</div>

在我的控制器中，我将传单指令属性扩展到范围：

    angular.extend($scope, {
    defaults: {
        dragging: true,
        doubleClickZoom: false,
        scrollWheelZoom: false,
        maxZoom: 12,
        minZoom: 12
    },
    center: {
        lat: $scope.cities[$scope.market.city][1],
        lng: $scope.cities[$scope.market.city][0],
        zoom: 12
    },
    markers: {},
    layers: {
        baselayers: {
            google: {
                name: 'Google Streets',
                layerType: 'ROADMAP',
                type: 'google'
            }
        }
    }
});

我不确定导致内存泄漏的原因，但我相信它可能与在leaflet指令中调用$ destroy时未删除的事件侦听器有关：

scope.$on('$destroy', function () {
    leafletData.unresolveMap(attrs.id);
});

在破坏函数unresolveMap时调用：

this.unresolveMap = function (scopeId) {
    var id = leafletHelpers.obtainEffectiveMapId(maps, scopeId);
    maps[id] = undefined;
};

这是我得到的。如果有人遇到任何类似的或有任何关于如何进一步攻击这个问题的想法，我将非常感激：）

Answer 1

你应该尝试通过在on $ destroy处理程序中添加map.remove（）来完全删除地图（从传单API应该：＆＃34;销毁地图并清除所有相关的事件监听器＆＃34;）。

scope.$on('$destroy', function () {
        leafletData.unresolveMap(attrs.id);
        map.remove();
      });

Answer 2

您是否尝试为地图分配id属性？这就是attrs.id所指的内容。

<leaflet id="myMap" defaults="defaults" center="center" markers="markers" layers="layers"></leaflet>

AngularJS Leaflet内存泄漏

2 个答案: