javascript - AngularJS $http.delete and $window.location.reload() - Stack Overflow

admin管理员组

文章数量:1325137

I have an interesting issue with the $http.delete() and $window.location.reload() functions. Basically I am calling a delete method that in turn calls the $http.delete() call which - using a REST API interface - removes data from a database (mongoDB). For reasons unknown this is what's happening:

• delete is successful in the database
  • this is verified as the data is no longer in the database
  • also monitored using Chrome DevTools it shows status: 200
• $window.location.reload() gets called and nothing happens
  • Chrome DevTools shows a GET call to the root of the domain but the status is 'pending'

The page does not time out, it basically keeps on loading and loading and loading. Once I hit refresh / CTRL-F5 all goes back to normal and I can see that my item has been deleted.

Some excerpts from my code:

app.js

angular.module('contacts', ['ngRoute', 'contacts.factory', 'contacts.filters', 'ui.bootstrap']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: '/p/list',
        controller: ListCtrl,
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]);

controllers.js

function ListCtrl($scope, $modal, contactFactory) {
 //code removed
  $scope.delete = function(c) {
    var id = c._id;
    var modalInstance = $modal.open({
      templateUrl: 'deleteContactModal',
      controller: deleteContactModalCtrl,
      resolve: {
        contact: function() {
          return contactFactory.getContact(id);
        }
      }
    });
  }
}

var deleteContactModalCtrl = function($scope, $route, $modalInstance, $window, contact, contactFactory) {
  $scope.name = contact.data.contact.name;

  $scope.deleteContact = function() {
    contactFactory.deleteContact(contact.data.contact._id).success(function() {
      //have also tried: $window.location.reload(true);
      //as well as window.location.href('/') - didn't work either
      $modalInstance.close($window.location.reload());
    });
  };
}

factory.js

angular.module("contacts.factory", []).
  factory('contactFactory', function($http){
    return {
      //code removed
      deleteContact: function(id) {
        return $http.delete('/api/contact/' + id);
      }
    }
  });

backend - app.js

//usual express setup
app.delete('/api/contact/:id', api.delete); //delete contact

backend - api.js

//code removed
exports.delete = function (req, res) {
  var id = req.params.id;
  if (id) {
    ContactModel.findById(id, function (err, contact) {
      contact.remove(function (err) {
        if (!err) {
          res.json(true);
        } else {
          res.json(false)
          console.log(err);
        }
      });
    });
  }
};

At the moment I'm not even sure if this issue is related to the frontend or to the backend. As mentioned before - the backend portion is working fine - the data is deleted from the DB.

I have an interesting issue with the $http.delete() and $window.location.reload() functions. Basically I am calling a delete method that in turn calls the $http.delete() call which - using a REST API interface - removes data from a database (mongoDB). For reasons unknown this is what's happening:

• delete is successful in the database
  • this is verified as the data is no longer in the database
  • also monitored using Chrome DevTools it shows status: 200
• $window.location.reload() gets called and nothing happens
  • Chrome DevTools shows a GET call to the root of the domain but the status is 'pending'

The page does not time out, it basically keeps on loading and loading and loading. Once I hit refresh / CTRL-F5 all goes back to normal and I can see that my item has been deleted.

Some excerpts from my code:

app.js

angular.module('contacts', ['ngRoute', 'contacts.factory', 'contacts.filters', 'ui.bootstrap']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: '/p/list',
        controller: ListCtrl,
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]);

controllers.js

function ListCtrl($scope, $modal, contactFactory) {
 //code removed
  $scope.delete = function(c) {
    var id = c._id;
    var modalInstance = $modal.open({
      templateUrl: 'deleteContactModal',
      controller: deleteContactModalCtrl,
      resolve: {
        contact: function() {
          return contactFactory.getContact(id);
        }
      }
    });
  }
}

var deleteContactModalCtrl = function($scope, $route, $modalInstance, $window, contact, contactFactory) {
  $scope.name = contact.data.contact.name;

  $scope.deleteContact = function() {
    contactFactory.deleteContact(contact.data.contact._id).success(function() {
      //have also tried: $window.location.reload(true);
      //as well as window.location.href('/') - didn't work either
      $modalInstance.close($window.location.reload());
    });
  };
}

factory.js

angular.module("contacts.factory", []).
  factory('contactFactory', function($http){
    return {
      //code removed
      deleteContact: function(id) {
        return $http.delete('/api/contact/' + id);
      }
    }
  });

backend - app.js

//usual express setup
app.delete('/api/contact/:id', api.delete); //delete contact

backend - api.js

//code removed
exports.delete = function (req, res) {
  var id = req.params.id;
  if (id) {
    ContactModel.findById(id, function (err, contact) {
      contact.remove(function (err) {
        if (!err) {
          res.json(true);
        } else {
          res.json(false)
          console.log(err);
        }
      });
    });
  }
};

At the moment I'm not even sure if this issue is related to the frontend or to the backend. As mentioned before - the backend portion is working fine - the data is deleted from the DB.

• javascript
• node.js
• angularjs
• express
• mean-stack

Share Improve this question Follow asked Feb 18, 2014 at 18:21 TamasTamas 11.2k1515 gold badges5151 silver badges7979 bronze badges 5

• You can use the POSTMan app/extension in chrome to test the backend independent of the front end. If all is well there I would start dropping debugger statements throughout the angular code to watch some of the variables to be sure everything appears to be called in order, also check the console throughout to be sure no warnings or errors are thrown. I believe the $resource in angular doesn't return a promise when you call delete though instead you need to pass the callback function to the delete call. – shaunhusain Commented Feb 18, 2014 at 18:28
• I've done a simple 'curl -i -X DELETE tamas:3000/api/contact/5303a83f3c8a52a20e7ac53f' and that worked -- HTTP/1.1 200 OK. Can you elaborate a bit more on the $resource/delete call? – Tamas Commented Feb 18, 2014 at 18:41
• Ah sorry I see you're using $http, at first glance I though you were using $resource which doesn't return a promise from the method calls. With $http I've only had experience using get and post but not delete though the docs say it should also return a promise/future object. – shaunhusain Commented Feb 18, 2014 at 18:45
• angular-ui.github.io/bootstrap <-- it appears the $modalInstance.close() takes the result to be passed to the result promise, not sure why you have the reload inside of there? It seems you would want to close the modal then reload the page maybe but could you explain why the result of the reload is being passed to the close method? – shaunhusain Commented Feb 18, 2014 at 18:50
• That's the only easy way that I found to close the modal window and update the page. It Amy be the wrong approach. It works for every other scenario (add/view/edit) - only delete hangs – Tamas Commented Feb 18, 2014 at 21:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Okay the solution seems to be the following:

$scope.deleteContact = function() {
    contactFactory.deleteContact(contact.data.contact._id).success(function() {
      $modalInstance.close();
      contactFactory.getContacts().success(function(contacts) {
        return $scope.contacts = contacts;
      });
      $window.location.reload();
    });
  };

I need to get the getContacts() method from my factory again during the delete method.

本文标签： javascriptAngularJS httpdelete and windowlocationreload()Stack Overflow