Hi,
I just started using Kendo. I am trying to bind data from AngularJs service to a TreeView without any success. Here is my AngularJs service code:
angular.module(
'testModule'
, []).service(
'testService'
, [
'$q'
,
'$http'
,
'$window'
,
function
($q, $http, $window) {
return
{
get: get
};
function
get() {
var
url = $window.location.origin +
'/api/testData'
;
return
$http.get(url).then(handleSuccess, handleError);
}
function
handleSuccess(response) {
return
response.data;
}
function
handleError(response) {
if
(!angular.isObject(response.data) || !response.data.message) {
return
$q.reject(
'An unknown error occurred.'
);
}
return
$q.reject(response.data.message);
}
} ]);
Here is my AngularJs controller:
angular.module(
'testModule'
)
.controller(
'testCtrl'
, [
'$scope'
,
'$q'
,
'$window'
,
'testService'
,
function
($scope, $q, $window, testService ) {
$scope.testDataFromSvc = {data:[]};
function
loadRemoteData() {
testService.get().then(
function
(data) {
$scope.testDataFromSvc.data = data;
});
}
$scope.something = {
data: [{ Name:
"Thing 1"
, id: 1 },
{ Name:
"Thing 2"
, id: 2 },
{ Name:
"Thing 3"
, id: 3}]
};
$scope.things = {
dataSource: $scope.testDataFromSvc
//Doesn't work? What should go here?
};
$scope.things2 = {
dataSource: $scope.something
//this works
};
} ]);
Here is my html:
<
div
ng-app
=
"testModule"
ng-controller
=
"testCtrl"
>
<
div
kendo-tree-view
=
"tree"
k-options
=
"things"
> //this doesn't display anything
<
span
k-template> {{dataItem.Name}} </
span
>
</
div
>
<
div
kendo-tree-view
=
"tree"
k-options
=
"things2"
> // this works
<
span
k-template> {{dataItem.Name}} </
span
>
</
div
>
</
div
>
I checked the data in the "testDataFromSvc" looks similar to what is in "something". At one point it looked like, it displayed the correct data but now I can reproduce it. What is the right way to use the data returned by AngularJs service? Any help is greatly appreciated.
Thanks,
-ana