AngularJS Inconsistent Data After Saving

Question

I have a user profile form where a user can change there name and upload a profile picture. After they save their data they are taken back to the home page where their profile information is shown in the sidebar.

The problem is sometimes the GET request to populate the User resource is made before the back-end is done processing the POST request that updated the User resource. Is there any good solution to this problem?

The relevant controller code:

$scope.user.$save();
$location.path('/');

Maybe you should redirect only on success or as a callback after saving? In Angular you can define action in callback method, you should put redirecting there instead of just going line by line. — hugerth
– hugerth, Commented Jul 2, 2014 at 21:45
can we get some of the code? if the GET is happening in consequence of the post, you could chain that in a callback, or maybe, the backend could return the diference of the record after the POST completes and you could update it. — Rafael Barros
– Rafael Barros, Commented Jul 2, 2014 at 21:47
I tried the callback solution, and it works but large images take a few seconds to upload in which the user is stuck on the user profile form waiting. Is there a way to update the profile in the sidebar once the POST is finished? — Jason Christa
– Jason Christa, Commented Jul 2, 2014 at 22:04

Community · Accepted Answer · 2020-06-20 09:12:55Z

From the Angular docs:

The action methods on the class object or instance object can be invoked with the following parameters:

HTTP GET "class" actions: Resource.action([parameters], [success], [error])

non-GET "class" actions: Resource.action([parameters], postData, [success], [error])

non-GET instance actions: instance.$action([parameters], [success], [error])

Success callback is called with (value, responseHeaders) arguments. Error callback is called with (httpResponse) argument.

So you would have to do:

$scope.user.$save({}, function(data,headers) {
    //success
    $location.path('/');
}, function(response) {
    //error       
    alert("error")         
});

Or

$scope.user.$save({}, {}, function(data,headers) {
    //success
    $location.path('/');
}, function(response) {
    //error       
    alert("error")         
});

I'm not sure which is classified as a "class action" - I assume user is an instance but I'm not positive.

If you want to update the info in the sidebar, you could broadcast that the post has finished:

$rootScope.$broadcast('user:saved')

and do whatever logic you need to in the sidebar

//in your sidebar controller or wherever
$scope.$on('user:saved', function() {

});

Collectives™ on Stack Overflow

AngularJS Inconsistent Data After Saving

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