同じディレクティブを同じビューで使用し、異なるデータをバインドします

Question

Highchartsライブラリで作成したグラフを表示するためのカスタムディレクティブを作成しました。

ここでは、このディレクティブを基に、複数のグラフを同じビューで作成したいと考えています。

これは、私が持っている現在のコードでは、以下のようにはできません。

同じビューで別のデータをバインドすることができるようにコードを整理するにはどうすればよいですか？

以下に、問題を説明するコード例を示します。

指令

function dateChart() { 
    return { 
    restrict: 'AE', 
    scope: { 
     title: '@' 
    }, 
    template: '<div id="chart"></div>', 
    link: function(scope, element, attrs) { 
     var chart; 

     function createChart() { 
     chart = new Highcharts.Chart({ 
      chart: { 
      title: scope.title 
     }); 
     } 

コントローラ

vm.title = "My Chart"; 

HTMLテンプレート

<date-chart></date-chart> 

    <date-chart></date-chart> 

Answer 1

あなたはTELする必要がある最初のリットルのデータはあなたのチャートのデータは、あなたがこのようにそれを一緒に渡すことができ$scope.someData2$scope.someData1であるとあれば

function dateChart() { 
    return { 
    restrict: 'AE', 
    scope: { 
     title: '@' 
     chartData: '=' 
    }, 
    template: '<div id="chart"></div>', 
    link: function(scope, element, attrs) { 
     var chart; 

     function createChart() { 
     chart = new Highcharts.Chart({ 
      chart: { 
      title: scope.title 
     }); 
     } 

に沿って渡されることを指令：

<date-chart chart-data="someData1"></date-chart> 

<date-chart chart-data="someData2"></date-chart>