使用 ngResource 嵌套参数答案

【问题标题】：Nesting parameters with ngResource使用 ngResource 嵌套参数
【发布时间】：2017-06-05 19:42:14
【问题描述】：

我想嵌套发送到后端服务器的参数。到目前为止，我当前的资源看起来像

  angular
    .module('myApp.users')
    .factory('User', user);

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

  function user($resource) {
    return $resource('/users.json');
  }

在我的控制器中...

var user = new User({name: 'jason', email: 'jason@gmail.com'});
user.$save()

发送到我的后端服务器的参数最终看起来像

{name: 'jason', email: 'jason@gmail.com'}

理想情况下，我希望发送到后端服务器的参数看起来像

 {user: {name: 'jason', email: 'jason@gmail.com'}}

我知道在控制器中我可以写

var user = new User({user: {name: 'jason', email: 'jason@gmail.com'}});

但是，我不喜欢这种方法。我想知道的是，有没有办法在用户资源中而不是在控制器中创建嵌套参数。 paramsDefault 参数可以在这里提供帮助吗？

【问题讨论】：

您应该查看this 的帖子。尝试使用转换请求。 here 是官方文档
我会调查的。也就是说，我真的很喜欢 $resource 对象的简洁性：return $resource('/users.json');。如果我可以避免自己手动创建不同的资源操作，例如更新和创建，我的工作将会非常出色。
使用服务怎么样？你考虑过吗？
也许这可以帮助nesterovsky-bros.com/weblog/2015/05/07/…
@EvertonSantos 我已经考虑过了。也就是说，它增加了我的代码的复杂性。我几乎宁愿只是容忍这个问题，然后建立一个服务来解决它。

标签： javascript angularjs ngresource

【解决方案1】：

根据官方文档，您应该能够使用 transformRequest 属性包装/映射输入数据：https://docs.angularjs.org/api/ngResource/service/$resource

试试下面的代码：

function user($resource) {
  var actions = {
    transformRequest: function(data, headersGetter){
      return {
        user: data
      }
    }
  }
  return $resource('/users.json',{},actions)
}

请参阅解释类似解决方案的问题和答案：Angularjs: Transform data before send with ng-resource and transformRequest

【讨论】：

我对文档的解释告诉我，我只能将 transformReques 应用于特定操作。例如，在您提供的 SO 问题中，他们在更新操作中有 transformRequest 。这正是我想要避免的。

【解决方案2】：

您可以在用户构造函数中添加原型方法

app.factory('User', function ($resource) {
        var User = $resource('/users.json');

        // add custom method below 
        User.prototype.getSpecificUser = function() {
            return new User({user: {name: 'jason', email: 'jason@gmail.com'}});
        };
        return User;
    });

在你的控制器中

User.getSpecificUser()

【讨论】：

我不希望通过生成一个新工厂来使事情变得过于复杂。

【解决方案3】：

您对为 $resource 编写一个简单的包装器有何看法？我已经设置an example plnkr：

想法是将所需的命名空间传递给包装器，然后使用 transformRequest 函数扩展每个操作：

app.factory('myResource', function($resource) {
  return function(namespace, url, paramDefaults, actions, options) {
    var transformRequest = function(data) {
      var payload = {};
      payload[namespace] = data;
      console.log(payload);
      return data;
    }

    // ngResource default actions: https://github.com/angular/angular.js/blob/master/src/ngResource/resource.js#L510
    actions = actions || {
      'get': {method: 'GET'},
      'save': {method: 'POST'},
      'query': {method: 'GET', isArray: true},
      'remove': {method: 'DELETE'},
      'delete': {method: 'DELETE'}
    };
    Object.keys(actions).map(function(action){
      actions[action].transformRequest = transformRequest;
    });

    return $resource(url, paramDefaults, actions, options)
  };
});

那么一个实际的工厂应该是这样的：

angular
  .module('myApp.users')
  .factory('User', user);

  user.$inject = ['myResource'];

  function user(myResource) {
    return myResource('user', '/users.json');
  }

【讨论】：