Оптимальный способ использования угловых директив и JSON

Question

Я хочу эффективный способ определения угловой директивы, которая записывается для отображения диаграммы.

После прочтения других ответов здесь Я нашел хороший способ создать директиву, которая отображает один график без каких-либо проблем.

Как использовать одну и ту же директиву для отображения разных графиков? Для каждого графика необходим объект JSON, который имеет настройки и данные для рендеринга.

Я не хочу загрязнять свой угловой вид, введя 100-150 строк JSON и передавая его через директиву.

Подробности: -

• Каждая диаграмма имеет несколько пар общий ключ/значение, что я могу оставить в директиве.
• Как мне ввести конкретный ключ карты & пары значений в каждой директиве?

Например: - Скажем, я хочу, чтобы на одной диаграмме были зеленые полосы, а на другой диаграмме были красные линии.

Угловая Директива

(function() { 

    'use strict'; 

    angular 
     .module("analytics") 
     .directive("angularDirectiveAmcharts", angularDirectiveAmcharts); 

    function angularDirectiveAmcharts() { 

     var directive = { 
      link: link, 
      restrict: 'A', 
      replace: true, 
      scope: { 
       chartdata: '=', 
       type: '=', 
       customstyle: '@', 
       chartsettings: '=', 
       chartid: '@' 
      }, 
      template: '<div id="{{ chartid }}" style="{{ customstyle }}"></div>' 
     }; 

     return directive;    


     function link(scope, elem, attrs) { 
      AmCharts.makeChart(scope.chartid, { 
       "type": "serial", 
       "categoryField": "date", 
       "autoMarginOffset": 10, 
       "marginRight": 20, 
       "marginTop": 20, 

       //I've deleted lots of keys and values for the sake of brevity 


       "dataProvider": scope.chartdata 
      }); 


     } 
    } 
})(); 

Посмотреть

<div class="chartarea" ng-controller="pcController as vm"> 

    <div angular-directive-amcharts chartid="chartdiv" chartdata="vm.chart_data"></div> 

</div> 

Я особенно о ремонтопригодности, потому что много изменений будет сделано после того, как я сделал с моей стажировки.

Answer 1

Часть данного кода в этом ответе основаны на другой answer

Вы можете использовать услугу, чтобы обеспечить стандартную конфигурацию для всех ваших директив диаграммы. В этой службе вы можете определить эту стандартную конфигурацию один раз и каждый раз объединять ее с определенной конфигурацией, создается директива. Таким образом, вы должны только объявить незначительные изменения в своем контроллере.

необязательные, но возможно конфигурации связывания в директиву:

<div ng-controller="myCtrl"> 
    <my-chart></my-chart> 
    <my-chart config="conf"></my-chart> 
</div> 

конкретная конфигурация в контроллере:

myapp.controller('myCtrl', function ($scope) { 
    $scope.conf = { 
     graphs: [{ type: 'column' }] 
    }; 
}); 

услуга для конфигурации по умолчанию (с использованием jQuerys way to deep merge объектов):

myapp.service('chartService', function() { 
    this.defaultConfig = { 
     "type": "serial", 
     // reduced object for readabilty 
    }; 
    this.getConfig = function (mergeObj) { 
     return $.extend(true, {}, this.defaultConfig, mergeObj); 
    } 
}); 

данные получает другую услугу и добавляет t о конфигурации после слияния:

var config = chartService.getConfig(scope.config || {}); 
config.dataProvider = dataProvider.getData(); 
chart = AmCharts.makeChart(element[0], config); 

Я подготовил fiddle, поэтому вы взглянете в качестве примера можно.