AngularJS-巨型指令

我有一个网站，必须在地图上显示不同的数据集。地图将始终保持不变-某些区域具有“悬停”效果和工具提示

大约有10组不同的数据

我创建了一个显示地图的指令

指令（仅绘制地图）

我的想法是从控制器（它来自API）获取要显示的数据，并将其发送到指令。在上述指令中，我将添加一个大的

开关

或多个

如果

，以使用正确的颜色、大小等显示正确的数据

我确信还有另一种方法来分担工作

例如：

• 显示地图的第一个指令。它可以多次重复使用
• 显示集合1的第二个指令
• 显示集合2的第三个指令

如果这是正确的方法，我如何才能做到这一点

其他信息

我有一个带有下拉菜单的菜单，可以选择要显示的数据。目前，这些项重定向到包含上述map指令的页面

有一个文件夹，你将有一系列的服务，其中每个服务将是你的数据集之一。 设置1服务，设置2服务。等 每一个都有自己的逻辑

有一个工厂服务将返回您的服务之一。 例如：

（新FactoryService（））->get（'dataSetItem'）//这将从第1点返回一个服务

在您的指令中注入FactoryService并使用它

在factory中，您将掌握如何解析数据集的逻辑，以确定必须返回的DataSetService

这是一个易于扩展和使用的方法

我描述的所有内容都与策略和工厂模式更相关，您可以阅读更多关于这些内容的内容，这将帮助您获得更抽象的实现

angular.module（'PluvioradApp.controllers'））
.指令（'map'，函数（factoryService）{
返回{
限制：'E'，
范围：{
数据集：'='
}
链接：函数（范围、元素、属性）{
//你所有的代码
var dataSetService=factoryService.get（scope.dataset）；
var result=dataSetService.seed（d3）；
}
}).service（'factoryService'，function（）{
this.get=函数（名称）{
var服务=null；
交换机（名称）{
案例“set1”
服务=新数据集1（）；
打破
案例“set2”
服务=新数据集2（）；
打破
}
回程服务；
}
});
函数数据集1（）{
}          
DataSet1.prototype.seed=函数（d3）{
//d3逻辑您可以在这里访问；
}
函数数据集2（）{
} 
DataSet2.prototype.seed=函数（d3）{
//d3逻辑您可以在这里访问；
}

您可以提供一些数据集的示例吗？例如，其中一个数据集是坐标列表，每个坐标包含不同的值。这些数据集是地图上的标记，带有显示值的标签。另一个数据集也是坐标列表，其值将在地图上显示为彩色像素（像一朵云）但是我所有的数据集都需要以不同的方式显示，我不能在服务内部使用D3.js。我需要一个指令，所有这些服务都只是用来准备数据，你可以注入你的D3并使用它。你可以做你想做的。这只是对你的问题的一个抽象视图，具体实现取决于你将传递什么数据你会有什么依赖关系更新答案有一个抽象的例子。我真的不明白它应该如何工作。我在菜单中选择了我想要的数据。菜单控制器应该调用什么？目前我正在重定向到一个带有我的地图方向的页面。当你创建新的服务实例时，你可以在工厂中尝试这个方法在$injector中，您将能够访问这个。但是我认为有一个更优雅的方法可以做到这一点，最后尝试一下，我的解决方案将有所帮助

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);   

            }
        }
    });