Обновление данных диаграммы плагина jQuery у AngularJs

Question

Я пытаюсь обновить значение данных рендеринговой карты. Я использую плагин jquery, jVectorMap.

Проблема в том, что когда я пытаюсь обновить набор данных, новая диаграмма добавляется к dom, сразу после старой.

Plunkr: http://plnkr.co/edit/eTyLpb3dAJf3AAmjrqDX?p=preview

app.directive('map', function() { 
return { 
    restrict: 'EAC', 
    link: function(scope, element, attrs) { 
     scope.$watch("mapdata" , function(n,o){ 
      $(element).width('auto') 
      $(element).height(400) 
      $(element).vectorMap({ 
       backgroundColor: 'transparent', 
       regionStyle: { 
        initial: { 
        fill: '#cccccc' 
        } 
       }, 
       series: { 
        regions: [{ 
         values: scope.mapdata, 
         scale: ['#C8EEFF', '#0071A4'], 
         normalizeFunction: 'polynomial' 
        }] 
       }, 
      });    
     });    
    } 
}; 
}); 

Другой подход мог бы быть таким:

app.directive('map', function() { 
return { 
    restrict: 'EAC', 
    link: function(scope, element, attrs) { 
     var chart = null; 

     var data = scope.datamap; 
     scope.$watch("data" , function(n,o){ 
     if(!chart){ 
      $(element).width('auto') 
      $(element).height(400) 
      chart = $(element).vectorMap({}) 
     }else{ 
      chart.vectorMap('set', 'colors', {us: '#000000'}); 
      console.log(chart) 
     } 
     });    
    } 
}; 
}); 

Plunkr: http://plnkr.co/edit/ib3Rgz?p=preview

При таком подходе я могу изменить цвет фона, но не государственные цвета .. .

Answer 1

jVectorMap i s добавление новой карты в элемент.

Вы можете:

1. Очистить элемент перед обновлением с element.empty(); (plunker: http://plnkr.co/edit/i8q39s?p=preview)

2. захватить MapObject векторной карты:

   var mapobject = element.vectorMap('get', 'mapObject'); 
   

   и обновить его из часов с данными области. Этот путь, вероятно, более «угловатый».