Kendo Chart 未在 AngularJS 中加载

Question

我同时使用 Kendo 和 Angular。我正在使用 Kendo Charts 来显示从数据库中获取的一些数据。我有一个使用 Angular $resource 从存储中获取数据的简单服务。它看起来像这样：

app.factory('statsData', function ($resource) {
    var Stats= $resource('myadress/stats/:id', { id: '@id' });

    return {
        get: function (id) {
            return Stats.get({ id: id});
        }
    }
});

所以，如果我执行这个，我会得到一个如下所示的对象数组：

[
    {
        "name": "Books",
        "amount": 200
    },
    {
        "name": "Newspapers",
        "amount": 320
    },
    {
        "name": "Magazines",
        "amount": 225
    },
    {
        "name": "Shoes",
        "amount": 400
    }
]

我的 Angular 控制器中有一个变量，用于存储来自服务的 get 函数的结果。

$scope.chartData = statsData.get(someId);

我在 HTML 中声明了我的剑道图表，如下所示：

<div kendo-chart
    k-series="[{ field: 'amount', categoryField: 'name'}]"
    k-data-source="chartData">
</div>

所以，我应该得到的结果应该是这样的：

问题是当我运行应用程序时，什么也没有发生。此外，如果我将 $scope.chartsData 变量的值更改为静态定义的对象数组，如下所示：

$scope.chartData = [ { "name": "Books", "amount": 200 },..];

一切正常，图表显示正确。所以，我的假设是问题与加载图表本身时数据仍未从服务返回的事实有关。我该如何解决这个问题？

Answer 1

好的，我找到了解决方案here。我刚刚在 HTML 中的 Kendo 图表中添加了一个 k-rebind 指令，这样我就可以确保在进行更改时正确绑定它。

所以，改变这个：

<div kendo-chart
    k-series="[{ field: 'amount', categoryField: 'name'}]"
    k-data-source="chartData">
</div>

到这里：

<div kendo-chart
    k-series="[{ field: 'amount', categoryField: 'name'}]"
    k-data-source="chartData"
    k-rebind="chartData">
</div>

问题是，最初我通过我的服务提供的数据源中没有数据。当我从服务器获得响应时，图表已经绑定，这就是我需要添加 k-rebind 指令的原因。就这么简单:)

Answer 2

另外一句话：

为什么不尝试在控制器中设置承诺分辨率？像这样的东西（为了避免进一步的问题，至少是我第一眼不喜欢的东西）

在控制器中：

 statsData.get(someId).then(function(dataRecieved) {
       $scope.chartData = dataRecieved; 
 }, function(data) {
   throw new Error("something went wrong");
 });

因为你的工厂你回报了一个承诺

app.factory('statsData', function ($resource) {
var Stats= $resource('myadress/stats/:id', { id: '@id' });

return {
    get: function (id) {
        return Stats.get({ id: id}); // here you return the promise, 
                                    //it will resorved in controller.
    }
 }
});