带有Angular指令的SVG:性能不佳

这是我第一次在这里问问题，但我完全被卡住了。我正在用Angular创建一个交互式svg地图。它与D3配合使用很好，但我希望使用Angular及其指令和模板。

目前，我设法让地图出现在屏幕上并对其进行操作，但表现很糟糕。我知道我必须过滤我的数据，但我不知道它在哪里：是在控制器上，还是在指令的链接上，还是API上？我不知道。

请注意，自从我3个月前开始学习Angular以来，我仍然是Angular的新手（不到一个月），即使是代码。所以，你肯定会在这里读到一些愚蠢的东西。

无论如何，我的问题是：如果（我想根据年份输入删除路径），我应该怎么做才能用一个简单的ng来替换复杂的ng隐藏

因此，我从API中检索一个JSON路径列表。

myjson:[｛"land_name"："landa"，"path"："…"，"born"：5000，end：5152｝{"land_name"："landi"，"path"："…"，"born"：1200，end：7100}{"land_name"："lando"，"path"："…"，"born"：100，end:4000}]

我的api（节点+猫鼬）：

// get all the lands (accessed at GET http://localhost:8080/api/landapi)
.get(function(req, res) {
    landapi.find(function(err, docs) {
        if (err)
        res.send(err);
  res.json(docs);
});
});

角度：

我的工厂：

.factory('landDataFactory', ['$http', function($http) {
  return $http.get('http://localhost:3000/api/landapi')
    .success(function(data) {
      return data;
    })
    .error(function(err) {
      return err;
    });

我的控制器：

  .controller('testCtrl',  function($scope, landDataFactory) {
  var vm = this;
  vm.paysList = [];
  vm.year = ''; (==> ng-model in the template)
  landDataFactory.success(function(data) {
    vm.land = data;
    for (var i = 0; i < vm.land.length; i++) {
      vm.LandList.push(vm.land[i]);
    }
  });

我的指令：

.directive('dynamicMap', function() {
  return {
    restrict: 'E',
    replace : true,
    scope: {
      datapath : '=',
      year : '='
    },
    templateUrl : './modules/dynamicmap.tpl.html',
    link : function(scope, element, attrs) {
    }
  };

我的模板：

<div>
  <div class="year">
    <input ng-model="year" type="number" step="50" class="inputDate col-xs-2 form-control" placeholder="date""> <br/>
  </div>
  <svg class="Map">
    <g class="drawLand"  ng-repeat="data in datapath">
      <path ng-hide="year == NULL || data.born > year || data.end < year" ng-attr-d="{{ data.path }}" id="{{ data.id_land }}"></path>
    </g>
  </svg>
</div>

我调用它时的指令：

<dynamic-map datapath="vm.paysList" year="vm.year"></dynamic-map>

提前感谢