I am using an API to load (Data) to my $scope resource, and I took an
example from a directive online to create a treeview. Recursive Tree View
Example <http://jsfiddle.net/n8dPm/>
However I am changing a few things to load data from an API. Please note
the commented data... when I uncomment my data everything works great,
however when I use $scope.treeFamily = TreeView.query() I think there is a
delay between the directive executing and me getting no data. Any insight
will be helpful. Thank you!
var module = angular.module("module", ["ngResource", "ngRoute"]);
module.factory('TreeView', function ($resource) {
return $resource('/api/TreeView/:Id', {}, {
show: { method: 'GET', isArray: true },
update: { method: 'PUT', params: { id: '@id' } },
delete: { method: 'DELETE', params: { id: '@id' } }
})
});
module.controller('TreeCtrl', function ($scope, TreeView) {
$scope.treeFamily = TreeView.query();
//$scope.treeFamily = {
// name: "Parent",
// children: [{
// name: "Child1",
// children: [{
// name: "Grandchild1",
// children: []
// }, {
// name: "Grandchild2",
// children: []
// }, {
// name: "Grandchild3",
// children: []
// }]
// }, {
// name: "Child2",
// children: []
// }]
//};
});
module.factory('RecursionHelper', ['$compile', function ($compile) {
var RecursionHelper = {
compile: function (element) {
var contents = element.contents().remove();
var compiledContents;
return function (scope, element) {
if (!compiledContents) {
compiledContents = $compile(contents);
}
compiledContents(scope, function (clone) {
element.append(clone);
});
};
}
};
return RecursionHelper;
}]);
module.directive("tree", function (RecursionHelper) {
return {
restrict: "E",
scope: { family: '=' },
template:
'<p>{{ family.name }}</p>' +
'<ul>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child"></tree>' +
'</li>' +
'</ul>',
compile: function (element) {
return RecursionHelper.compile(element);
}
};
});
The Result from what i get there using the following HTML.
<!DOCTYPE html><html lang="en" ng-app="module"><head>
<title></title></head><body>
<div class="container">
<div ng-controller="TreeCtrl">
<table>
<tr>
<th>Name</th>
</tr>
<tr ng-repeat="result in treeFamily">
<td> From Table: {{result.name}}</td>
</tr>
</table>
<tree family="treeFamily"></tree>
</div>
<div ng-view=""></div>
</div>
*Result :* Name From Table: Parent
HOWEVER, this is from the the ng-repeat within my table, so i know the API
is sending DATA and it is readable.
{
ID: "1",
type: "Folder",
name: "Parent",
children: []}
The problem is that it seems that the directive is not loading this
data.... If however uncomment the built in data I have for that scope it
works fine...
I have a feeling that my directive is loading faster than my API call so I
get no data. Am i doing something wrong?
Any help will be appreciated!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
