Angular如何正确销毁指令答案

【问题标题】：Angular how to correctly destroy directiveAngular如何正确销毁指令
【发布时间】：2015-08-06 18:53:23
【问题描述】：

我有一个“regionMap”指令，其中包括渲染和销毁地图的方法。地图在模态框内呈现，单击模态框关闭按钮后，将调用“regionMap”销毁方法，该方法应从页面中删除元素和范围。但是，当返回到包含 'region-map' 元素的模式页面时，不会删除之前的 'region-map' 元素，从而导致显示多个地图。关闭模式时从页面中删除 regionMap 指令的正确方法是什么？

// 指令

(function(){
'use strict';

angular.module('homeModule')
.directive('regionMap', regionMap);

function regionMap() {

    var directive = { 
            restrict: 'E',
        template: '',
        replace: true,
        link: link,
        scope: {
            regionItem: '=',
            accessor: '='
        }
    }

    return directive;

    function link(scope, el, attrs, controller) {
        if (scope.accessor) {
            scope.accessor.renderMap = function(selectedRegion) {
                var paper = Raphael(el[0], 665, 245);
                paper.setViewBox(0, 0, 1100, 350, false);
                paper.setStart();
                for (var country in worldmap.shapes) {
                    paper.path(worldmap.shapes[country]).attr({
                      "font-size": 12,
                      "font-weight": "bold",
                      title: worldmap.names[country],
                      stroke: "none",
                      fill: '#EBE9E9',
                      "stroke-opacity": 1
                    }).data({'regionId': country});
                }

                paper.forEach(function(el) {
                    if (el.data('regionId') != selectedRegion.name) {
                      el.stop().attr({fill: '#ebe9e9'});
                    } else {
                      el.stop().attr({fill: '#06767e'});
                    }
                });
            }
            scope.accessor.destroyMap = function() {
                scope.$destroy();
                el.remove();
            }
        }
    }
 }


})();

//控制器模板：

<region-map accessor="modalvm.accessor" region-item="modalvm.sregion"></region-map>

// 控制器：

vm.accessor = {};

...

function showMap() {

$rootScope.$on('$includeContentLoaded', function(event) {
    if (vm.accessor.renderMap) {
        vm.accessor.renderMap(vm.sregion);
    }
});

function closeMap() {
    if (vm.accessor.destroyMap) {
        vm.accessor.destroyMap();
    }
    $modalInstance.dismiss('cancel');
}

【问题讨论】：

你能说说你是怎么想出来的吗？

标签： angularjs angularjs-directive

【解决方案1】：

该问题与加载带有指令的模板有关。通过添加一个 var 来检查地图之前是否已经渲染过来修复它：

vm.accessor.mapRendered = false;
$rootScope.$on('$includeContentLoaded', function(event) {
  if (vm.accessor.renderMap && !vm.accessor.mapRendered) {
    vm.accessor.renderMap(vm.selectedRegions);
    vm.accessor.mapRendered = true;
  }
});

【讨论】：