这是我第一次在这里问一些事情,但我完全陷入困境。 我正在用Angular创建一个交互式svg地图。它适用于D3,但我想使用Angular及其指令和模板。
目前,我设法让地图显示在屏幕上并操纵它,但表演很糟糕。 我知道我必须过滤我的数据,但我不知道在哪里:它是在控制器上,还是指令的链接,还是API?我不知道。
请注意,自从3个月前我开始学习它以来,我仍然是Angular(几乎一个月)的菜鸟,即使是代码也是如此。所以,你肯定会在这里读到一些愚蠢的东西。
无论如何,我的问题是:我应该做些什么来通过简单的ng-if替换我的复杂ng-hide(我想根据年份输入删除路径)。
所以,我正在从我的API中检索路径的JSON列表。
myjson: [{“land_name”:“landa”,“path”:“...”,“born”:5000,结束:5152} {“land_name”:“landi”,“path”:“......”,“born”:1200,结束:7100} {“land_name”:“lando”,“path”:“......”,“born”:100,结束:4000}]
我的api(node + mongoose):
// 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);
});
});
angular:
我的工厂:
.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>
提前致谢
答案 0 :(得分:0)
我几乎没有资格发表评论,因为我只和Angular一起玩了大约2天,但是在那个短暂的时期内,我发现如果你有中等大小的数据集,很容易遇到性能问题。根据我的理解,您应该非常努力地限制您创建的双向数据绑定的数量。由于您的代码具有ng-repeat,因此,如果可能,您应该通过将{data:path}
替换为{::data.path}
来实现在重复内部进行绑定。
我真正的建议是不要使用棱角分明。据我所知,Angular 1.0是一个死胡同,因为它很快就会被Angular 2.0黯然失色。此外,Angular的整个哲学似乎围绕着“看这个语法有多好!HTML和javascript从未如此简单!”,对于“哦,你想做一个真的应用程序?这里有一些丑陋的黑客让它表现,顺便说一下,你不明白指令和工厂指令和指令工厂之间的区别吗?你怎么能不知道每个标签都有不同范围规则......“。
简而言之,等待Anuglar 2.0或寻找其他东西。我选择react.js,到目前为止发现它重量更轻,更直观,更适合长期生产力。