Как сделать настраиваемую директиву или передать переменную в директиве в угловом js

Question

Я пытаюсь сделать гистограмму в угловой. Я могу сделать в jquery (используя файл highchart.js). Это ссылка, которую я могу сделать в JQueryкод http://plnkr.co/edit/SD1iSTBk8o1xi3unxKeE?p=preview .Я получаю правильный output.But то же самое, мне нужно показать, используя angularjs с помощью директивы .so я пытаюсь сделать директивы .My вопрос, как я передам свой параметр в директиве

вот мой угловой код. http://plnkr.co/edit/LwonlkbCy3asHXyToVMz?p=catalogue

// Code goes here 

angular.module('contactsApp', ['ionic']) 
.controller('MainCtrl', function($scope) { 

}).directive('chartTest',function(){ 
    return { 
    restrict: 'E', 
    scope:{ 

    }, 
    link :function(scope, element, attrs){ 
     element.highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: chart_title 
     }, 
     xAxis: { 
      categories: xAxisarry 
     }, 
     yAxis: { 
      title: { 
       text: 'Fruit eaten' 
      } 
     }, 
     series: [{ 
      name: names[0], 
      data: janeData 
     }, { 
      name: names[1], 
      data: joneData 
     }] 
    }); 
    } 


    } 

}); 

Хочу выглядеть так же, как в JQuery? можем ли мы передать переменную в директиве с использованием области?

Answer 1

Вам необходимо передать параметры из изолированного объема вашей директивы, а затем внутри вашей директивы вам необходимо использовать $ на элементе директивы, чтобы сделать способ highcharts.

Разметка

<chart-test chart-title="chartTitle" x-axisarry="xAxisarry" 
y-axis="yAxis" json-data="janeData" names="names"></chart-test> 

Контроллер

.controller('MainCtrl', function($scope) { 
    $scope.chartTitle = ""; 
    $scope.xAxisarry = ['Apples', 'Bananas', 'Oranges']; 
    $scope.yAxis = 'Fruit eaten'; 
    $scope.data = { 
     jane: [1, 0, 4], 
     jone: [5, 7, 3] 
    }; 
    $scope.names = ["jane", "jone"]; 

}) 

Директива

.directive('chartTest', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     chartTitle: '=', 
     xAxisarry: '=', 
     yAxis: '=', 
     jsonData: '=', 
     names: '=' 
     }, 
     link: function(scope, element, attrs) { 
     $(element).highcharts({ 
      chart: { 
      type: 'bar' 
      }, 
      title: { 
      text: scope.chartTitle 
      }, 
      xAxis: { 
      categories: scope.xAxisarry 
      }, 
      yAxis: { 
      title: {text: 'Fruit eaten'} 
      }, 
      series: [{ 
      name: scope.names[0], 
      data: scope.jsonData['jane'] 
      }, { 
      name: scope.names[1], 
      data: scope.jsonData['jone'] 
      }] 
     }); 
     } 
    } 
}); 

Working Plunkr