Карточка Kendo не загружается в AngularJS

Question

Я использую Kendo и Angular вместе. Я использую диаграммы Kendo для отображения некоторых данных, полученных из базы данных. У меня есть простой сервис с использованием ресурса Angular $ для получения данных из хранилища. Это выглядит следующим образом:

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 
    } 
] 

У меня есть переменный в моем угловом контроллере, который хранит результат функции 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. Я только что добавил директиву k-rebind к диаграмме Kendo в HTML, чтобы я мог убедиться, что она правильно привязана при внесении изменений.

Таким образом, изменить это:

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