CODEWITHSUNDEEP
javascriptajaxangularjsangularjs-scopeangular-resource
Ren
Ren

Reputation: 3455

Angular JS, scope updates in Async callback

I've got a series of 2 AJAX requests, with the latter depending on the results of the first. I've put them into the promise of the first returned object. ie.

var productResource = $resource('http://urlhere');
$scope.product = productResource.get();

$scope.product.$promise.then(function(data) {

    var depResource = $resource('http://deps/' + data.code );
    $scope.deps = depResource.get();

    $scope.$apply();

});

I can see the resource is hit with the appropriate data pulled down in my network tab, but my HTML is not updated. I've just got it within {{ }} brackets to see the results. ie.

Prod -  {{ product }}
Deps -  {{ deps }}

product resolves the product recieved, but deps remain blank. Why is this?

Upvotes: 0

Views: 444

Answers (1)

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

you don't need to $apply since everything is inside the angular event loop what you need is not to destroy the reference to your binding by reassigning the product object. when you linked your html product either didn't existed or was pointing to an mem address. when you did

$scope.product = productResource.get();

you reassigned that variable to a different address so the binding was broken. but your html was not rebinded to the new address, this is more likely your problem, you can try making the variable null before reassigning it, not sure thats going to work, or you could make products initially an empty object and then extend it with 

productResource.get();

Upvotes: 1

Related Questions