使用指令范围更新 Highcharts答案

【问题标题】：Using directive scope to update Highcharts使用指令范围更新 Highcharts
【发布时间】：2016-07-12 16:59:59
【问题描述】：

我有两个不同的 ids 图表（#chart1 和 #chart2）。我创建了一个按钮，因此我可以更改图表的类型（例如，从列到行）：

<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 值传递给范围：

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

在我的 HTML 中，我调用了传递图表 ID 的指令：<change-chart name="chart1"></change-chart>

但是，该按钮不起作用。仅当我删除指令范围并手动设置 id 时它才有效。关于如何解决这个问题的任何想法？

这是一个 Plunker：http://plnkr.co/edit/5wmLldmXpoq9wiMACbNS?p=preview

【问题讨论】：

标签： javascript angularjs angularjs-directive highcharts

【解决方案1】：

这是因为当您在指令中定义范围对象时，它会为该指令创建一个隔离范围。这意味着，指令中的范围不能访问外部定义的范围属性。您在附加函数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"
  };
})

【讨论】：

感谢您的解释。这解决了这个问题。 :)