AngularJS传单内存泄漏答案

【问题标题】：AngularJS Leaflet memory leakAngularJS传单内存泄漏
【发布时间】：2014-04-17 22:15:45
【问题描述】：

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

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

该指令基于此处找到的传单 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'
            }
        }
    }
});

我不确定是什么导致了内存泄漏，但我相信这可能与在传单指令中调用 $destroy 时未删除的事件侦听器有关：

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

在销毁函数时调用 unresolveMap：

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

这是据我所知。如果有人遇到过类似情况或对如何进一步解决此问题有任何想法，我将不胜感激:)

【问题讨论】：

我也刚刚注意到这一点，想知道您在找出泄漏发生的位置是否取得了任何进展？
你解决了这个问题吗？

标签： angularjs memory-leaks leaflet event-listener angular-leaflet-directive

【解决方案1】：

您应该尝试通过在 on $destroy 处理程序中添加 map.remove() 来完全删除地图（从传单 API 中它应该：“销毁地图并清除所有相关的事件侦听器”）。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：