È meglio avere una singola direttiva più generale o più direttive di tipo multiplo in Angular?

È considerata una buona pratica avere:

1. Una singola direttiva generale che ha più dati * parametri e dati seriali è vincolata dal controllore
2. Singola direttiva generale che ha dati di configurazione e seriali dal controller
3. Direttive multiple che hanno alcune configurazioni predefinite all'interno della direttiva, alcune di configurazione sono dati- * parametri e dati seriali sono vincolati dal controllore

Ad esempio, ho un modello dovevo creare ~ 16 grafici (Highcharts / amCharts). Tutti loro non avranno la stessa configurazione e dati seriali.

Esempio di 1 opzione:

angular.module('myApp')
  .directive('ngHighcharts', () => ({
    restrict: 'AE',
    replace: 'true',
    scope: {
      data: '='
    },
    template: '<div></div>',
    link: function(scope, $elem, $attrs) {

      var chart, config;
      config = {
        chart: {
          renderTo: $elem[0],
          type: $attrs.type ? $attrs.type : 'bar'
        },
        exporting: {
          enabled: $attrs.exporting ? $attrs.exporting : false
        },
        title: {
          text: $attrs.title ? $attrs.title : ''
        },
        xAxis: {
          categories: $attrs.categories ? $attrs.categories : data[0]
        },
        tooltip: {
          valueSuffix: $attrs.valueSuffix ? $attrs.valueSuffix : ''
        },
        plotOptions: {
          bar: {
            dataLabels: {
              enabled: $attrs.dataLabels ? $attrs.dataLabels : false
            }
          }
        },
        series: scope.data
      };

      chart = new Highcharts.Chart(config);

      scope.$on('$destroy', function () {
        scope.$evalAsync(function () {
          chart.destroy ();
        });
      });

    }
   }));

Esempio di opzione 2:

angular.module('myApp')
  .directive('ngHighcharts', () => ({
    restrict: 'AE',
    replace: 'true',
    scope: {
      config: '=',
      data: '='
    },
    template: '<div></div>',
    link: function(scope, $elem, $attrs) {

      config.chart.renderTo = $elem[0];
      var chart = new Highcharts.Chart(config);

      scope.$on('$destroy', function () {
        scope.$evalAsync(function () {
          chart.destroy ();
        });
      });

    }
   }));

Esempio di opzione 3:

angular.module('myApp')
  .directive('ngHighcharts', () => ({
    restrict: 'AE',
    replace: 'true',
    scope: {
      data: '='
    },
    template: '<div></div>',
    link: function(scope, $elem, $attrs) {

      var chart, config;
      config = {
        chart: {
          renderTo: $elem[0],
          type: 'bar'
        },
        exporting: {
          enabled: true
        },
        title: {
          text: $attrs.title ? $attrs.title : ''
        },
        xAxis: {
          categories: $attrs.categories ? $attrs.categories : data[0]
        },
        tooltip: {
          valueSuffix: $attrs.valueSuffix ? $attrs.valueSuffix : ''
        },
        plotOptions: {
          bar: {
            dataLabels: {
              enabled: true
            }
          }
        },
        series: scope.data
      };

      chart = new Highcharts.Chart(config);

      scope.$on('$destroy', function () {
        scope.$evalAsync(function () {
          chart.destroy ();
        });
      });

    }
   }));

Quale sarebbe la migliore pratica in questa situazione?