javascript AngularJS $http.delete 和 $window.location.reload()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21862229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS $http.delete and $window.location.reload()
提问by Tamas
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:
我对 $http.delete() 和 $window.location.reload() 函数有一个有趣的问题。基本上，我正在调用一个删除方法，该方法又调用 $http.delete() 调用，该调用 - 使用 REST API 接口 - 从数据库 (mongoDB) 中删除数据。由于未知的原因，这就是正在发生的事情：
- 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'
- 在数据库中删除成功
- 这被验证为数据不再在数据库中
- 还使用 Chrome DevTools 监控它显示状态：200
- $window.location.reload() 被调用并且没有任何反应
- Chrome DevTools 显示对域根的 GET 调用，但状态为“待处理”
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.
页面没有超时，基本上一直在加载加载加载。一旦我点击刷新/CTRL-F5，一切都会恢复正常，我可以看到我的项目已被删除。
Some excerpts from my code:
我的代码的一些摘录：
app.js
应用程序.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
控制器.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
工厂.js
angular.module("contacts.factory", []).
factory('contactFactory', function($http){
return {
//code removed
deleteContact: function(id) {
return $http.delete('/api/contact/' + id);
}
}
});
backend - app.js
后端 - app.js
//usual express setup
app.delete('/api/contact/:id', api.delete); //delete contact
backend - api.js
后端 - 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.
目前我什至不确定这个问题是与前端有关还是与后端有关。如前所述 - 后端部分工作正常 - 从数据库中删除数据。
回答by Tamas
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.
在删除方法期间，我需要再次从我的工厂获取 getContacts() 方法。
