AngularJs jquery plugin지도 차트 데이터 업데이트

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 요소에 새 맵을 추가합니다.

당신은 할 수 있습니다

이

1. 맑은 element.empty();으로 업데이트하기 전에 요소 (plunker : http://plnkr.co/edit/i8q39s?p=preview)

2. 잡아이 벡터지도의 mapObject :

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

   및 시계에서 업데이트 스코프 데이터 이 방법은 아마 더 '각도'입니다. 내가 var에 mapobject를 설정해야하는 위치