Question

我想要一种有效的方法来计算用于显示图表的Angular Directive。

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

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

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

详细说明： -

每个图表都有一些常用的键/值对，我可以在指令中留下。
如何输入图表特定的密钥＆amp;每个指令中的值对？

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

角度指令

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

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

</div>

查看

{{1}}

我特别关注可维护性，因为在我完成实习后会有很多变化。

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

数据通过其他服务获得，并在合并后添加到配置中：

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

我已准备好fiddle，因此您可以查看示例。

使用Angular Directives和JSON的最佳方式

1 个答案: