AngularJS - huge directive -

i have website has display different set of data on map. map same - areas 'onhover' effect , tooltip.

there 10 different sets of data.

i created directive display map

directive (only draw map)

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 make responsive                     .append("svg")                     //responsive svg needs these 2 attributes , no width , height attr                     .attr("preserveaspectratio", "xminymin meet")                     .attr("viewbox", "0 0 1000 500")                     //class make 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 , 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);                 }         }     }); 

my idea data display controller (it comes api) , send directive. inside above directive add big switch or multiple if display correct data correct colors, size,...

i sure there way split work.

for example :

• 1st directive display map. can reuse multiple time
• 2nd directive display set 1
• 3rd directive display set 2

if correct way, how can achieve ?

additional information

i have menu dropdown select data displayed. moment, items redirect page containing map directive above

1. have folder have bunch of service, each service 1 of data set. set1service, set2service. etc. each of have own logic.

2. have factory service return 1 of service. example:

   (new factoryservice())->get('datasetitem'); //this return 1 of services point 1.

3. inject factoryservice in directive use it.

4. in factory have logic how parse data set, determine datasetservice have return

this extensible easy use.

all described more related strategy , factory pattern, can read more , have more abstract implementation.

angular.module('pluvioradapp.controllers')      .directive('map', function(factoryservice) {          return {              restrict: 'e',              scope: {                dataset: '='              }              link: function(scope, element, attrs) {                 //all 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 have access here;      }                        function dataset2() {                    }                         dataset2.prototype.seed = function(d3) {         //d3 logic have access here;      }