使用 Angular 指令和 JSON 的最佳方式

Question

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

在阅读了此处的其他答案后，我找到了一种创建指令的好方法，它可以毫无问题地显示单个图表。

如何重复使用相同的指令来显示不同的图表？每个图表都需要一个具有设置和数据的 JSON 对象才能呈现。

我不想通过输入 100-150 行 JSON 并通过指令传递它来污染我的 Angular 视图。

详情：-

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

例如：- 假设我想要一个图表有绿色条，另一个图表有红线。

Angular 指令

(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

Parts of the given code in this answer are based on another 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);
    }
});

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

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

我准备了一个fiddle，你可以看看例子。

使用 Angular 指令和 JSON 的最佳方式

Optimal way to use Angular Directives and JSON

javascript

json

amcharts

angularjs