Use Same Directive In Same View And Bind Different Data

I have created a custom directive for displaying a charts made with the Highcharts library. Now I want to build upon this directive and create multiple charts in the same view. Th

Solution 1:

First you need to tell the directive that data will be passed along

functiondateChart() {
  return {
    restrict: 'AE',
    scope: {
      title: '@'chartData: '='
    },
    template: '<div id="chart"></div>',
    link: function(scope, element, attrs) {
      var chart;

      functioncreateChart() {
        chart = newHighcharts.Chart({
          chart: {
          title: scope.title
        });
      }

So if the data for your charts is at $scope.someData1 and $scope.someData2 you can pass it along like this:

<date-chart chart-data="someData1"></date-chart>

<date-chart chart-data="someData2"></date-chart>