AngularJS controller data from AJAX - does not always work

Question

I am using Angular 1.4.7 with angular-ui-router 0.2.15 as state router. My standard controller looks like:

var app = angular.module('App.Page1',[....]);
app.controller('Page1Ctrl',['$scope' ... ,function($scope ...) {
...
  $scope.records = [];

  // jsRoutes.controllers.Page1.list() - is ajax wrapper
  jsRoutes.controllers.Page1.listitems().ajax({
    success: function(data) { 
       console.log("RECV",data);
       $scope.records = data 
    },
    error: function(res){ console.log("ERROR",res); }
  });
});

And controller template that just rolls out records:

<h1>Page1</h1>
<div ng-repeat="record in records" class="row">
    {{record.name}} ...
</div>

It works but not stable. Sometimes I am receiving a page only with the header. Looks like parsers array is empty but I see in Network requests that list request was successfully received and success function was called. After refreshing a page, I see my data again.

ExpectoPatronum · Accepted Answer · 2015-11-17 12:27:46Z

2

Your ajax service call is outside the context of AngularJS. Hence you need to explicitly inform Angular that some data has changed.

This can be done calling $scope.$apply() in your success function after you assign data to your $scope variable.

$scope.parsers = data; $scope.$apply();

This should solve your issue.

edited Nov 17, 2015 at 12:27

answered Nov 17, 2015 at 11:30

ExpectoPatronum

5074 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS controller data from AJAX - does not always work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related