Verwenden des Richtlinenbereichs zum Aktualisieren von Highcharts

Question

Ich habe zwei Diagramme mit verschiedenen ids (#chart1 und #chart2). Ich habe eine Schaltfläche erstellt, so kann ich ein Chart-Typ (zB aus Spalte Zeile) ändern:

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

Diese Taste ruft die updateChart Funktion:

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

Als ich die Taste aufrufen müssen für jedes Diagramm, habe ich eine Richtlinie Leiten eines name Wert auf den Bereich erstellt:

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

In meinem HTML nenne ich die Richtlinie das Diagramm-ID übergeben: <change-chart name="chart1"></change-chart>

Die Schaltfläche funktioniert jedoch nicht. Es funktioniert nur, wenn ich den Anweisungsbereich entferne und den id manuell setze. Irgendwelche Ideen, wie man das löst?

Hier ist ein Plunker: http://plnkr.co/edit/5wmLldmXpoq9wiMACbNS?p=preview

Answer 1

denn das ist, wenn Sie einen Bereich Objekt in Ihrer Richtlinie definieren, ist es ein Isolat Rahmen für diese Richtlinie schafft. Das bedeutet, dass der Bereich innerhalb Ihrer Direktive nicht auf die außerhalb definierten Bereichseigenschaften zugreifen kann. Sie haben Ihren Controller für den äußeren Bereich definiert, an den Sie die Funktion updateChart anhängen. Ihre isolierende Bereichsrichtlinie kennt diese Methode nicht.

Um dies zu beheben, können Sie einen Controller auf Ihrer Anweisung selbst definieren. Und in diesem Controller, definieren Sie die Methode 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" 
    }; 
})