Question

使用AngularJS和Typescript（不要担心，如果你不知道TypeScript，AngularJS提议会帮我）我正在尝试为highcharts创建一个指令，该指令包含动态数据，该数据通过调用获取的服务来填充图表数据（通过REST）

我的HTML看起来像这样：

<div ng-repeat="request in controller.chartRequests">
            <bar-chart id = "snapshotChart"
                    get-chart-data = "controller.getChartData(request)" // Some other attributes />
            </bar-chart>
</div>

我希望根据我在控制器中存储的请求数量动态绘制图表。

请求对象由＆＃39; chartDataService＆＃39;使用。如下图所示。

它将数据作为数组返回 - 例如：[1,12]并且我将其解析为承诺

public getChartData = (chartRequest) => {

        let deferred = this.$q.defer();
        this.chartDataService.dispatchCommand(chartRequest).then(
            this.returnChartData // just returns a series
        ).then((series) => {
            // This populates fine e.g [1,12]
            deferred.resolve(series);
        });

        return deferred.promise;
    };


constructor() {
        let directive:ng.IDirective = {};
        directive.restrict = 'E';
        directive.replace = true;
        directive.scope = {
            getChartData: '&',
            /** Other attributes **/
        };

directive.link = (scope, element, attrs) => {

        let highchartsOptions:HighchartsOptions = {

            /**
            * Some Highcharts config this all works fine
            **/

            series: [
                {
                    data: scope.getChartData()
                }
            ]
        };

        let chart = new Highcharts.Chart(
            highchartsOptions
        );

        }

我在getChartData（）上尝试了一个scope.watch但这会导致看起来无限循环的请求。

不确定是否有人可以帮助我 - 我可能会以错误的方式解决这个问题。

非常感谢任何帮助！

干杯

AngularJS使用ng-repeat

0 个答案: