Angular ngResource $ save方法清除$ resource对象(Angular ngResource $save Method Clears $resource Object)

在这里使用Angular 1.5.5：

有没有办法告诉Angular忽略特定请求的响应体（例如$ save）？在我调用$ save之后，它让我发疯，使用服务器返回的对象更新模型，最初应该用于区分请求的不同分辨率。它导致不需要的形式清晰。有趣的是，即使我发送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 }); });

无论哪种方式，我都不喜欢必须从服务器发送整个对象的想法（特别是当它是一个失败的请求时），即使我必须这样做，我仍然需要一种方法来发送一些将被忽略的额外数据角。

非常感激你的帮助！

Using Angular 1.5.5 here:

Is there any way to tell Angular to ignore response body for particular requests (such as $save)? It drives me crazy that after I call $save, angular updates the model with the object returned by a server, which initially was supposed to be used to distinguish between different resolutions of the request. It results in unwanted form clear. Interestingly enough, this behaviour remains even if I send a 400 or 500 http status code.

In case you need more info, relevant code is below.

Controller:

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

Service:

'use strict'; angular .module('app.operators') .service('operatorsService', operatorsService); operatorsService.$inject = ['$resource']; function operatorsService($resource) { return $resource('/operators/:id/', {id: '@_id'}, { 'update': { method: 'PUT' } }); }

Server request handler is also fairly simple:

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

In either way I don't like the idea of having to send the entire object from server (particularily when it's a failed request), and even if I have to, I still need a way to send some extra data that will be ignored by Angular.

Your help is very much appreciated!

最满意答案

资源对象的$save方法清空并用XHR POST结果替换该对象。要避免这种情况，请使用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 });

UPDATE

它导致不需要的形式清晰。有趣的是，即使我发送400或500 http状态代码，这种行为仍然存在。

此行为未经验证。

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

PLNKR上的DEMO

在我调用$save ，使用服务器返回的对象更新模型会让我发疯

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

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

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

在AngularJS中， form指令取消浏览器默认操作，并执行ng-submit或ng-click指令设置的Angular Expression。如果XHR成功，所有$resource实例方法（包括$get和$save ）为空，并使用XHR结果替换资源对象。这与浏览器传统上处理表单的方式一致。

在RESTful API中，HTTP GET操作返回服务器资源的状态而不更改它。 HTTP POST操作向服务器添加新的资源状态。 API通常返回新的资源状态，以及ID，位置，时间戳等附加信息。某些RESTful API返回重定向（状态302或303），在这种情况下，浏览器使用新位置透明地执行HTTP GET。（这有助于解决双重提交问题。）

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

The $save method of the resource object empties and replaces the object with the results of the XHR POST results. To avoid this, use the .save method of the operatorsService:

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

UPDATE

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

This behavior is NOT VERIFIED.

I created a PLNKR to attempt to verify this behavior and found that the $save method does not replace the resource object if the server returns a status of 400 or 500. However it does empty and replace the resource object if the XHR status code is 200 (OK).

The DEMO on PLNKR

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

It helps to understand how browsers handle traditional submits from forms.

The default operation for a submit button uses method=get. The browser appends the form inputs to the URL as query parameters and executes an HTTP GET operation with that URL. The browser then clears the window or frame and loads the results from the server.

The default operation for method=post is to serializes the inputs and place them in the body of an HTTP POST. The browser then clears the window or frame and loads the results from the server.

In AngularJS the form directive cancels the browser default operation and executes the Angular Expression set by either the ng-submit or ng-click directive. All $resource instance methods including $get and $save, empty and replace the resource object with XHR results from the server if the XHR is successful. This is consistent with the way browsers traditionally handle forms.

In RESTful APIs, HTTP GET operations return the state of a server resource without changing it. HTTP POST operations add a new resource state to the server. APIs usually return the new resource state, with additional information such as ID, Location, timestamps, etc. Some RESTful APIs return a redirect (status 302 or 303) in which case browsers transparently do an HTTP GET using the new location. (This helps to Solve the Double Submission Problem.)

When designing RESTful APIs, it is important to understand how traditional browsers behave and the expectations of RESTful clients such as AngularJS ngResource.

更多推荐