Question

我有两个不同的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

Answer 1

这是因为当您在指令中定义范围对象时，它会为该指令创建一个隔离范围。这意味着，指令中的作用域无法访问外部定义的作用域属性。您在附加函数updateChart的外部作用域上定义了控制器。因此，您的isolate scope指令不了解此方法。

要解决此问题，您可以在指令本身上定义控制器。在该控制器中，定义方法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"
  };
})

使用指令范围更新Highcharts

1 个答案: