ディレクティブスコープを使用してハイチャートを更新する

Question

ids（#chart1および#chart2）という異なる2つのチャートがあります。私は、ボタンを作成しましたので、私は（例えば、列から行に）グラフの種類を変更することができます。

<button ng-click="updateChart(name, 'line')">Line</button> 

このボタンはupdateChart関数を呼び出します：私はボタンを呼び出す必要として

$scope.updateChart = function(id, type) { 
    var chart = $('#' + id).highcharts(); 
    chart.series[0].update({ 
    type: type 
    }); 
}; 

をすべてのチャートのために、私はスコープにname値を渡すディレクティブを作成しました：私のHTMLで

.directive('changeChart', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     name: '@' 
    }, 
    templateUrl: "change-chart.html" 
    }; 
}) 

私はチャートのIDを渡しディレクティブを呼び出す：<change-chart name="chart1"></change-chart>

ただし、ボタンが機能していません。これは、ディレクティブのスコープを削除してidを手動で設定した場合にのみ機能します。どのようにこれを解決するための任意のアイデアですか？ http://plnkr.co/edit/5wmLldmXpoq9wiMACbNS?p=preview

Answer 1

あなたのディレクティブでスコープオブジェクトを定義する場合、それはそのディレクティブのための分離株のスコープを作成しているためである。ここでは

はPlunkerです。つまり、ディレクティブ内のスコープは、外部で定義されたスコーププロパティにアクセスできません。 updateChartという関数をアタッチする外側のスコープで定義されたコントローラがあります。ですから、あなたの分離スコープ・ディレクティブはこのメソッドを認識していません。

この問題を解決するには、ディレクティブ自体にコントローラを定義することができます。そのコントローラでは、メソッドを定義します。updateChart

.directive('changeChart', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     name: '@' 
    }, 
    controller: function ($scope) { 
     $scope.updateChart = function(id, type) { 
      var chart = $('#' + id).highcharts(); 
      chart.series[0].update({ 
       type: type 
      }); 
     }; 
    }, 
    templateUrl: "change-chart.html" 
    }; 
})