AngularJS -巨大指令
AngularJS -巨大指令
提问于 2016-09-13 06:45:52
我有一个网站，必须在地图上显示不同的数据集。地图将永远是相同的-一些地区的‘悬停’效果和工具提示。
大约有10组不同的数据。
我创建了一个指令来显示地图
指令(只绘制地图)
angular.module('PluvioradApp.controllers')
.directive('map', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var svg = d3.select(element[0])
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 1000 500")
//class to make it responsive
.classed("svg-content-responsive", true);
var g = svg.append("g");
//Scale / translate / ...
var lineFunction = d3.svg.line()
.x(function(d) { return (d[0]+50000)/500; })
.y(function(d) { return (-d[1]+170000)/500; })
.interpolate("linear");
//Draw map
var path = g.selectAll('path')
.data(data.areas)
.enter().append("path")
.attr("d", function(d){ return lineFunction(d.borders)})
.attr("fill", "#D5708B")
.on('mouseover', function(d) {
d3.select(this).style('fill', 'orange');
d3.select(this).text(function(d){return "yeah";})
})
.on('mouseout', function(d) {
g.selectAll('path').style('fill', '#D5708B');
});
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom", function() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
g.selectAll("path")
.attr("d", function(d){ return lineFunction(d.borders)});
});
svg.call(zoom);
}
}
});我的想法是从控制器(来自API)中获取要显示的数据，并将其发送给指令。在上面的指令中，我将添加一个大的switch或多个if来显示正确的数据和正确的颜色、大小、.
我相信还有另外一种方法来分担这项工作。
例如：
- 第一个指令显示地图。它可以重复使用多次。
- 显示集1的第二个指令
- 显示集2的第三个指令
如果这是正确的方法，我怎样才能做到呢？
附加信息
我有一个下拉菜单来选择将显示哪些数据。目前，项目重定向到包含上述map指令的页面。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-13 07:10:15
- 拥有一个文件夹，在那里您将拥有一组服务，其中每个服务都将是您的数据集之一。Set1Service，Set2Service.等等，每一个都有自己的逻辑。
- 有一个工厂服务，这将返回您的服务之一。例如： (新的FactoryService())->get('dataSetItem')；//这将从第1点返回一个服务。
- 在您的指令中插入FactoryService，使用它。
- 在工厂中，您将具有解析数据集的逻辑，以确定您必须返回的DataSetService。
这是可扩展的，易于使用。
我所描述的更多与战略和工厂模式相关，您可以阅读更多关于这些模式的内容，这将帮助您获得更多的抽象实现。
angular.module('PluvioradApp.controllers')
.directive('map', function(factoryService) {
return {
restrict: 'E',
scope: {
dataSet: '='
}
link: function(scope, element, attrs) {
//all your code
var dataSetService = factoryService.get(scope.dataset);
var result = dataSetService.seed(d3);
}
}).service('factoryService', function() {
this.get = function(name) {
var service = null;
switch (name) {
case 'set1'
service = new DataSet1();
break;
case 'set2'
service = new DataSet2();
break;
}
return service;
}
});
function DataSet1() {
}
DataSet1.prototype.seed = function(d3) {
//d3 logic you have access here;
}
function DataSet2() {
}
DataSet2.prototype.seed = function(d3) {
//d3 logic you have access here;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39463765
复制相关文章
相似问题
腾讯云开发者
