AngularディレクティブのSVG：悪いパフォーマンス

Question

私はここに何かを求めていますが、私は完全に立ち往生しています。 私はAngularでインタラクティブなSVGマップを作成しています。 D3ではうまく動作しますが、そのディレクティブとテンプレートでAngularを使用したいと思います。

現在、マップを画面に表示して操作することができましたが、パフォーマンスはひどいです。 データをフィルタリングする必要があることはわかっていますが、コントローラーやディレクティブのリンクやAPIのどこにあるのか分かりません。知りません。

私はまだ3ヶ月前にそれを学び始めて以来、私はまだAngular（1ヶ月はほとんどない）のコードであっても、ノブです。だから、あなたは確かにここでいくつかの愚かなものを読むでしょう。

とにかく、私の質問は、単純なng-if（私は年の入力に応じてパスを削除したい）で私の複雑なng-hideを置き換えることになっています。

私はAPIからパスのJSONリストを取得しています。

myjson： [{ "land_name"： "ランダ"、 "パス"：」... " "生まれ"：5000、終了：5152} { "land_name"： "ランディ"、" 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> 

事前

Answer 1

のおかげで、私は唯一と遊んだので、私はコメントすることはかろうじて適格です約2日間の角度ですが、その短い期間では、中規模のデータセットでさえあれば、パフォーマンス上の問題に遭遇するのは非常に簡単です。私が理解していることから、作成する双方向データバインディングの数を制限することは非常に難しいことです。あなたのコードはng-repeatを持っているので、可能であれば、{data:path}を{::data.path}に置き換えて、繰り返しの中にバインディングを作成することを検討してください。

私の本当のアドバイスは角度を使用しないことです。私が知ることから、Angular 1.0は、Angular 2.0で間もなく消え去る予定であるため、デッドエンドです。さらに、Angularの哲学全体は、というアイデアを基に構築されているようです。「この構文がいかにいいか見てください！〜「ああ、本当のアプリを作りたいのですが、ここでは実行するためのいくつかの醜いハックがあります。そして、ディレクティブと工場指令とディレクティブファクトリの違いを理解していませんか？どのようにして、すべてのタグが異なる有効範囲の規則を持っているかわからないのですか？ "。

要するに、Anuglar 2.0を待つか、他のものを探してください。私はreact.jsに行って、これまでより軽量で直感的で長時間の生産性を向上させました。