AngularJS ng-repeat with data from service -

AngularJS ng-repeat with data from service -

originally in app, created controllers basic $http calls resource getting id of object url ($routeparams). ng-repeat display results correctly.

however, noticed refreshing in later view (different controller) wiped out info , broke page. so, created function on service used in multiple controllers, check whether info has available , react follows:

1) if resource defined, homecoming (no api call) 2) if resource not defined, id url , api 3) if resource not defined & can't id, homecoming false.

however, broke code: template rendered before service returned data, , ng-repeat did not update. code looks this:

angular.module('myapp', ['ngcookies']) .config(...) .service('myservice', ['$cookies', '$http', function($cookies, $http) { mydata = {}; homecoming { getdata:function(dataid) { if(mydata.name) {return mydata); else if (dataid && dataid !== '') { $http.get('/api/data/' + dataid) .success(function(data) { mydata = data.object; $cookies.dataid = data.object.id; homecoming mydata; } } else { homecoming false; } } } }]); function myctrl($scope, $http, $routeparams, myservice) { $scope.data = myservice.getdata($routeparams.dataid); ... }

and here's template. it's in jade, means rather angle brackets, list element parameters in parenthesis right after, , content after parenthesis.

h2 heading ul li(ng-repeat='option in data') a(href="#", ng-click='somefuncinctrl(option.name)') {{ option.name }}

when controller did $http.get itself, ng-repeat worked fine because $scope updated in ".success" callback. there's service returns info after slight delay, "$scope.data" undefined, ng-repeat list empty.

i used console.log check mydata right before homecoming "return mydata", , mydata working, isn't returned in time, , whatever reason list not updating whenever $scope data.

i looked using $routeprovider's resolve... makes getting id url challenging, resolve object doesn't seem have access $routeparams. know $scope.$apply supposed help update scope when it's altered outside functions... have no clue set it. most similar problem on didn't utilize service.

i tried:

$scope.$apply($scope.data = myservice.getdata($routeparams.dataid));

and

$scope.$apply(function() { $scope.data = myservice($routeparams.dataid); });

both times got error: $digest in progress.

the problem on way interact service. since getdata function can homecoming both synchronous and/or asynchronous information, can't utilize normal return(s).

$http.get('/api/data/' + dataid) .success(function(data) { mydata = data.object; $cookies.dataid = data.object.id; homecoming mydata; });

the return on above snippet not homecoming getdata because executed on context of $http.get success callback (and not on getdata phone call stack).

the best approach handling sync , async service requests utilize promises.

your getdata function should this:

getdata:function(dataid) { var deferred = $q.defer(); if(mydata.name) { deferred.resolve(mydata); } else if (dataid && dataid !== '') { $http.get('/api/data/' + dataid) .success(function(data) { mydata = data.object; $cookies.dataid = data.object.id; deferred.resolve(mydata); // update angular's scopes $rootscope.$$phase || $rootscope.$apply(); }); } else { deferred.reject(); } homecoming deferred.promise; }

note: need inject $rootscope on service.

and on controller:

function myctrl($scope, $http, $routeparams, myservice) { myservice.getdata($routeparams.dataid).then(function(data) { // request successful $scope.data = data; }, function() { // request failed (same 'return false') $scope.data = undefined; }); }

service angularjs apply resolve ng-repeat