Angular ngResource $save 方法清除 $resource 对象

Angular ngResource $save Method Clears $resource Object

在这里使用 Angular 1.5.5:

有什么方法可以告诉 Angular 忽略特定请求(例如 $save)的响应正文?令我发疯的是,在我调用 $save 之后,angular 使用服务器返回的对象更新模型,该对象最初应该用于区分请求的不同分辨率。它会导致不需要的形式清晰。有趣的是,即使我发送 400 或 500 http 状态代码,这种行为仍然存在。

如果您需要更多信息,相关代码如下。

控制器:

  'use strict';
  angular
    .module('app.operators')
    .controller('OperatorNewController', OperatorNewController);

  OperatorNewController.$inject = ['operatorsService', 'notify'];

  function OperatorNewController(operatorsService, notify) {
    var vm = this;
    vm.done = done;

    activate();

    function activate() {
      vm.operator = new operatorsService();
    }

    function done(form) {
      if (form.$invalid) {
        // do stuff
        return false;
      }

      vm.operator.$save(function(response) {
        if (response.success && response._id) {
          $state.go('app.operators.details', {id: response._id}, { reload: true });
        } else if (response.inactive) {
          // do stuff
        } else {
          // do other stuff
        }
      }, function (error) {
        // do other stuff
      });
    }
  }

服务:

  'use strict';
  angular
    .module('app.operators')
    .service('operatorsService', operatorsService);

  operatorsService.$inject = ['$resource'];

  function operatorsService($resource) {
    return $resource('/operators/:id/', {id: '@_id'}, {
      'update': { method: 'PUT' }
    });
  }

服务器请求处理程序也相当简单:

  .post('/', function (req, res) {
    if (!req.operator.active) {
      return res.status(500).json({ inactive: true, success: false });
    }
    // do stuff
    return res.json({ success: true });
  });

无论哪种方式,我都不喜欢必须从服务器发送整个对象的想法(尤其是当它是一个失败的请求时),即使我必须这样做,我仍然需要一种方法来发送一些额外的数据将被 Angular.

忽略

非常感谢您的帮助!

资源对象的$save方法清空并用XHRPOST结果的结果替换对象。为避免这种情况,请使用 operatorsService:

.save 方法
  //vm.operator.$save(function(response) {
  vm.newOperator = operatorsService.save(vm.operator, function(response),
    if (response.success && response._id) {
      $state.go('app.operators.details', {id: response._id}, { reload: true });
    } else if (response.inactive) {
      // do stuff
    } else {
      // do other stuff
    }
  }, function (error) {
    // do other stuff
  });

更新

It results in unwanted form clear. Interestingly enough, this behaviour remains even if I send a 400 or 500 http status code.

此行为未经验证。

我创建了一个 PLNKR 来尝试验证此行为,发现 $save 方法 不会替换 如果服务器 return 是一个资源对象状态为 400 或 500。但是,如果 XHR 状态代码为 200 (OK),它会清空并替换资源对象。

DEMO on PLNKR


It drives me crazy that after I call $save, angular updates the model with the object returned by a server

它有助于理解浏览器如何处理来自表单的传统提交。

提交按钮的默认操作使用 method=get。浏览器将表单输入附加到 URL 作为查询参数,并使用该 URL 执行 HTTP GET 操作。然后浏览器清除 window 或框架并从服务器加载结果。

method=post 的默认操作是序列化输入并将它们放入 HTTP POST 的正文中。然后浏览器清除 window 或框架并从服务器加载结果。

在AngularJS 中,form 指令取消浏览器默认操作并执行由ng-submitng-click 指令设置的Angular 表达式。所有 $resource 实例方法包括 $get$save,如果 XHR 成功,清空并用服务器的 XHR 结果替换资源对象。这与浏览器处理表单的传统方式一致。

在 RESTful API 中,HTTP GET 操作 return 服务器资源的状态而不更改它。 HTTP POST 操作向服务器添加新的资源状态。 API 通常 return 新资源状态,带有附加信息,如 ID、位置、时间戳等。一些 RESTful API return 重定向(状态 302 或 303),在这种情况下浏览器透明使用新位置执行 HTTP GET。 (这有助于Solve the Double Submission Problem。)

在设计 RESTful API 时,了解传统浏览器的行为方式以及 RESTful 客户端(例如 AngularJS ngResource)的期望非常重要。