This is the way of asynchronous javascript. The way in which you're calling the TreeView factory will never be ready in time for the $scope.treeFamily to have data for it. You need to wrap your controller's call for the execution of TreeView.query and have it return in a callback which will then give you access to the data you need.
Here's a plunker example. Because i don't have an API to actually call out to, i simply return your sample data in mock form. I've also put in, commented out, the actual call to the resource which includes the callback. - additionally i broke out your resource call to a reusable Entity factory, this way you dont have to make a factory for each api end point you plan to hit. just pass it object parameters. http://plnkr.co/edit/xUtuLw3iAcHoGdU9P3F0?p=preview On Wednesday, April 9, 2014 3:14:48 PM UTC-4, ADL wrote: > > 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: [] > > ... -- 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.
