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

时间:2014-02-18 18:21:47

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

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

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

1 个答案:

答案 0 :(得分:4)

好的解决方案似乎如下:

$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()方法。