Angular wait resource delete respond to update list?

Question

I'm using $resource to add/delete list. The problem is after deletion I still see sometimes deleted element.

How I can resolve it?

This is the code:

services.js

var services = angular.module('cliConsApp.services', ['ngResource']);

services.factory('IndustrialistsFactory', function ($resource) {
    return $resource(
        '/app_dev.php/api/v1/constructionprivateinformations/:id/industrialists',
        {id: '@id'},
        {
            query: { method: 'GET', isArray: true },
            create: { method: 'POST'}
        }
    )
});

services.factory('IndustrialistFactory', function ($resource) {
    return $resource(
        '/app_dev.php/api/v1/constructionprivateinformations/:id/industrialists/:industrialistId',
        {id: '@id', industrialistId:'@industrialistId'},
        {
        delete: { method: 'DELETE', params: {id: '@id'} }
        }
    )
});

controllers.js

app.controller('industrialistCtrl', ['$scope', 'IndustrialistsFactory', 'IndustrialistFactory',

function ($scope, IndustrialistsFactory, IndustrialistFactory) {

        $scope.createNewUser = function (id) {
            IndustrialistsFactory.create({id: id},$scope.industrialist);

            $scope.industrialists= IndustrialistsFactory.query({},{id: id });

        }

        $scope.deleteUser = function (industrialistId, id) {
            IndustrialistFactory.delete({id: id, industrialistId: industrialistId  });

            $scope.industrialists= IndustrialistsFactory.query({},{id: id});
        }

    $scope.init = function (id) {
        $scope.id=id;
        $scope.industrialists= IndustrialistsFactory.query({id: $scope.id});

    }
}]);

Thanks

Answer 1

The $resource is asyn process and returns promise¹.

From your code:

IndustrialistFactory.delete({id: id, industrialistId: industrialistId  });

$scope.industrialists= IndustrialistsFactory.query({},{id: id});

You try to delete element and immediately after load new object.

Try to run $scope.industrialists= IndustrialistsFactory.query({},{id: id}); only after you got callback that element was deleted.

It should be something like:

IndustrialistFactory.delete({id: id, industrialistId: industrialistId  }).
 .$promise.then(
    //success
    function( value ){
      $scope.industrialists= IndustrialistsFactory.query({},{id: id});
    },
    //error
    function( error ){
        alert(error);
     }
  )

What is promise:¹

A promise represents a future value, usually a future result of an asynchronous operation, and allows us to define what will happen once this value becomes available, or when an error occurs.

Answer 2

You need to wait for the delete promise to resolve before attempting to query the server again.

$scope.deleteUser = function (industrialistId, id) {
    IndustrialistFactory.delete({id: id, industrialistId: industrialistId  })
         .$then(function(response){
              $scope.industrialists= IndustrialistsFactory.query({},{id: id});
         },function(response){
              //something went wrong...
         });
};

Answer 3

I would have commented, but don't have the rep. Just wanted to point out that I was having the same problem (ang v1.2.6) but realized it was because I was doing:

//bad
var obj = IndustrialistFactory({...});
obj.$delete().$promise.then(...);

rather than what it needs to be (on the resource itself)

//good
var obj = IndustrialistFactory({...});
IndustrialistFactory.delete({id:obj.id}).$promise.then(...);