AngularJs jquery插件地图图表数据更新

我正在尝试更新渲染地图图表的数据值。我使用jquery插件jVectorMap

问题是，当我尝试更新数据集时，一个新图表被附加到dom中，就在旧图表之后

普朗克：

另一种方法可以是：

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)
         }
      });              
    }
};
});

普朗克：

---

使用这种方法，我可以更改背景颜色，但不能更改状态颜色…

jVectorMap正在将新贴图附加到元素

你可以：

使用

element.empty（）更新之前清除元素（plunker:）

抓取矢量地图的mapObject：

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

并使用范围数据从手表中更新它。这种方式可能更“有角度”

---

我不确定应该在哪里设置var mapobject…我已经更新了plunkr（），尝试了一种基于本文@jojo的不同方法。您可以使用选项2发布plunkr吗？

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