Thank YOU!! I am still on the angularjs learning curve. Your example is very helpful!
On Thursday, April 10, 2014 6:02:30 AM UTC-7, phil pastorek wrote: > > 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.
