Использование области действия для обновления Highcharts

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. Таким образом, ваша директива scope 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" 
    }; 
})