AngularJS - 巨大な指示文

Question

マップ上に異なるデータセットを表示する必要があるウェブサイトがあります。マップは常に同じです - 一部の領域には「オンホー」効果とツールチップがあります。

約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から来ています）、それを指令に送ってください。私は正しい色、大きさ、との正しいデータを表示するためにifswitch大きなまたは複数が追加されます上記のディレクティブ...

内部で私が仕事を分割する別の方法があることを確信しています。例えば

：

• 第一指令は、マップを表示します。これは、複数の時間に、これは正しい方法であれば、どのように私はこれを達成することができます2

を設定し表示するように設定する1つの

第三ディレクティブを表示する

第二ディレクティブを再利用することができますか？

追加情報

私は、表示されるデータを選択するためのドロップダウンでメニューを持っています。現時点では、アイテムを使用すると、各サービスがあなたのデータセットの1つになるサービスの束を持ってするフォルダを持っている

Answer 1

1. の上にマップディレクティブを含むページにリダイレクトします。Set1Service、Set2Service。 これはそれぞれ独自のロジックを持っています。

2. あなたのサービスの1つを返す工場出荷時のサービスをご利用ください。 例：

   （new FactoryService（）） - > get（ 'dataSetItem'）; //これは、ポイント1からのサービスの1つを返します。

3. あなたが指示する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; 
 
    }