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

Question

这是我第一次在这里问什么，但我完全被卡住了。 我正在用 Angular 创建一个交互式 svg 地图。它适用于 D3，但我想使用 Angular 及其指令和模板。

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

请注意，我仍然是 Angular 的菜鸟（几乎不到一个月），即使我在 3 个月前开始学习代码时也是如此。所以，你肯定会在这里读到一些愚蠢的东西。

无论如何，我的问题是：我应该怎么做才能用简单的 ng-if 替换复杂的 ng-hide（我想根据年份输入删除路径）。

所以，我正在从我的 API 中检索 JSON 路径列表。

我的json： [ {“land_name”：“landa”，“路径”：“...”，“出生”：5000，结束：5152} {“land_name”：“landi”，“路径”：“...”，“出生”：1200，结束：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>

提前致谢

Answer 1

我几乎没有资格发表评论，因为我只玩了 Angular 大约 2 天，但在那短暂的时间内，我发现即使是中等规模的数据集，也很容易遇到性能问题。据我了解，您应该非常努力地限制您创建的双向数据绑定的数量。由于您的代码具有 ng-repeat，因此如果可能，您应该考虑通过将 {data:path} 替换为 {::data.path} 来以一种方式在重复内部进行绑定。

我真正的建议是不要使用 angular。据我所知，Angular 1.0 是一个死胡同，因为它很快就会被 Angular 2.0 所取代。此外，Angular 的整个哲学似乎都建立在 “看看这个语法多棒！HTML 和 javascript 从未如此简单！”，到 “哦，你想做一个真正的应用程序？好吧，这里有一些丑陋的黑客来让它执行，顺便说一下，你不明白指令和工厂指令和指令工厂之间的区别吗？你怎么会不知道每个标签都有不同的范围规则...".

简而言之，等待 Anuglar 2.0 或寻找其他东西。我选择了 react.js，到目前为止发现它更轻、更直观，并且可以更好地提高长期生产力。