使用Angular Directives和JSON的最佳方法

Question

我想要一种有效的方法来分解为显示图表而编写的角度指令。

在这里阅读了其他答案之后，我发现了一种很好的方法来创建一个显示单个图表的指令而没有任何问题。

如何重用相同的指令以显示不同的图表？ 每个图表都需要一个具有设置和数据的JSON对象才能进行渲染。

我不想通过键入100-150行JSON并将其通过指令传递来污染我的Angular View。

细节：-

• 每个图表都有一些常见的键/值对，我可以在指令中保留它们。
• 如何在每个指令中注入图表特定的键和值对？

例如：-假设我希望一张图表有绿色条，另一张图表有红色线。

角度指令

(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

此答案中给定代码的某些部分基于另一个答案

您可以使用服务为所有图表指令提供标准配置。 在此服务中，您可以定义一次此标准配置，并在每次创建指令时将其与特定配置合并。 这样，您只需要在控制器中声明较小的更改即可。

不需要，但可以将配置绑定到指令中：

<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' }]
    };
});

默认配置服务（使用jQuery的方式深度合并对象）：

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

数据通过另一个服务获取，并在合并后添加到配置中：

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

我已经准备好了小提琴 ，所以您可以看一个例子。