AngularJS $http.delete 和 $window.location.reload()答案

【问题标题】：AngularJS $http.delete and $window.location.reload()AngularJS $http.delete 和 $window.location.reload()
【发布时间】：2014-03-18 16:56:16
【问题描述】：

我对 $http.delete() 和 $window.location.reload() 函数有一个有趣的问题。基本上我正在调用一个删除方法，该方法又调用 $http.delete() 调用，该调用 - 使用 REST API 接口 - 从数据库 (mongoDB) 中删除数据。由于未知的原因，这就是正在发生的事情：

在数据库中删除成功
- 已验证，因为数据不再在数据库中
- 也使用 Chrome DevTools 进行监控，显示状态：200
$window.location.reload() 被调用并且没有任何反应
- Chrome DevTools 显示对域根目录的 GET 调用，但状态为“待处理”

页面没有超时，基本上一直在加载加载加载。一旦我点击刷新 / CTRL-F5 一切都会恢复正常，我可以看到我的项目已被删除。

摘自我的代码：

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);
      }
    }
  });

后端 - app.js

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

后端 - 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);
        }
      });
    });
  }
};

目前我什至不确定这个问题是与前端有关还是与后端有关。如前所述 - 后端部分工作正常 - 数据已从数据库中删除。

【问题讨论】：

您可以使用 chrome 中的 POSTMan 应用程序/扩展来测试独立于前端的后端。如果一切顺利，我将开始在整个 Angular 代码中删除调试器语句，以观察一些变量以确保所有内容似乎都按顺序调用，还要检查控制台以确保没有引发警告或错误。我相信当您调用 delete 时，角度中的 $resource 不会返回承诺，但您需要将回调函数传递给 delete 调用。
我已经完成了一个简单的 'curl -i -X DELETE tamas:3000/api/contact/5303a83f3c8a52a20e7ac53f' 并且有效 - HTTP/1.1 200 OK。您能否详细说明 $resource/delete 调用？
抱歉，我看到您使用的是 $http，乍一看，我以为您使用的是 $resource，它不会从方法调用中返回承诺。使用 $http 我只有使用 get 和 post 但没有使用 delete 的经验，尽管文档说它也应该返回一个 promise/future 对象。
angular-ui.github.io/bootstrap
这是我发现关闭模式窗口并更新页面的唯一简单方法。艾米是错误的方法。它适用于所有其他场景（添加/查看/编辑） - 仅删除挂起

标签： javascript node.js angularjs express mean-stack

【解决方案1】：

好的，解决方案似乎如下：

$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();
    });
  };

我需要在删除方法期间再次从我的工厂获取 getContacts() 方法。

【讨论】：