AngularJS $http.delete and $window.location.reload()



我对$http.delete()和$window.location.reload()函数有一个有趣的问题。基本上,我调用的是一个delete方法,该方法反过来调用$http.delete()调用,该调用使用RESTneneneba 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);
}]);

控制器.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);
}
});
});
}
};

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

好的,解决方案似乎如下:

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

在delete方法期间,我需要再次从工厂获取getContacts()方法。

最新更新