Angular JS：在 PUT 请求中发送表单字段数据（就像 POST 一样）

Question

我正在尝试编写一个执行所有四个 REST 动词 (GET/POST/PUT/DELETE) 的客户端，并且除了 PUT 之外的所有内容都已完成。我正在使用的 REST/CRUD API 想要通过调用 PUT /realmen/ID-string 并将键值对包含为 JSON 来更新条目。对于 POST，这似乎“自动”工作，但不适用于 PUT。

我的 HTML 看起来像：

<div id="list">
<form novalidate class="edit-form">
<p>Title <input ng-model="realmen.title" type="text" value="{{realmen.title}}" /></p>
<p>Real Men <input ng-model="realmen.realmen" type="text" value="{{realmen.realmen}}" />  </p>
<p>Real Role-Players <input ng-model="realmen.realroleplayers" type="text" value="realmen.realroleplayers}}" /></p>
<p>Loonies <input ng-model="realmen.loonies" type="text" value="{{realmen.loonies}}" /></p>
<p>Munchkins <input ng-model="realmen.munchkins" type="text" value="{{realmen.munchkins}}" /></p>
<input ng-model="realmen.entryId" type="hidden" value="{{entryId}}"/>
<button ng-click="change()">UPDATE ({{entryId}})"</button></p>
</form>
</div>

我的控制器看起来像：

$scope.realmen = RealMen.get({entryId: $routeParams.entryId}, function() {
      $scope.master = angular.copy($scope.realmen); // For resetting the form
});

$scope.change = function() {
    console.log($scope.realmen);
    RealMen.update({entryId: $scope.entryId}, function() {
            $location.path('/');
    });
}

最后，我的服务看起来像：

angular.module('realmenServices', ['ngResource']).
factory('RealMen', function($resource){
    var RealMen = $resource(
        'http://localhost\\:3000/realmen/:entryId',
        {},
        {
                query: {method:'GET', params:{entryId:''}, isArray:true},
                post: {method:'POST'},
                update: {method: 'PUT', params:{entryId:'@entryId'}},
                remove: {method:'DELETE'}
        });

    return RealMen;
});

使用 URL 中正确的 id 值调用 PUT，但 Request Payload 仅包含 entryId，因此后端 API 没有获得预期的键和值，并且基本上将数据库中的记录清空。

console.log($scope.realmen) 确实显示了表单字段以及许多额外的数据。我尝试调用 RealMen.update($scope.realmen, ...)（类似于调用 .save()），但所有这些额外的字段都以非常丑陋的方式作为查询字符串参数附加到 URL。

Answer 1

因为你的$scope.realmen 是一个资源实例，而不是使用RealMen.update，你可以直接调用$scope.realmen.$update()（注意有一个“$”）。实例操作方法将负责为您发送数据。