Question

是否可以向ngResource添加虚拟属性？我创建了这样的服务

app.factory('Person', ['$resource', function($resource) {

  return $resource('api/path/:personId', {
    personId: '@_id'
      }, {
        update: {
          method: 'PUT'
        }
      });
}])

Person有一个属性name和一个属性surname 我想通过添加返回fullname的虚拟属性fullname来检索resource.name + resource surname 我知道我可以在控制器中添加它，但是将它添加到服务中会使它更加便携。我试过这样的事情

app.factory('Person', ['$resource', function($resource) {

  return $resource('api/path/:personId', {
    personId: '@_id'
      }, {
        update: {
          method: 'PUT'
        },
    fullname: function(resource){
      return resource.name + ' ' + resource.surname;
    }
  });
 });
}])

但它不起作用。

Answer 1

根据文档，$resource返回一个构造函数。您可以利用通常的prototype构造函数来添加成员，即：

var Person = $resource('api/path/:personId', {
            personId: '@_id'
        }, {
            update: { method: 'PUT' }
        }); // same as the 1st snippet from the question

Person.prototype.xxxx = ...;

return Person; // from your Angular service

在前面的示例中，xxxx可以是原型中通常允许的任何内容。如果你想要的实际上是一个派生属性，即一个总是反映name和surname属性的JS属性，那么你需要一个支持Object.defineProperty()的相当新的浏览器并替换{上面的{1}}行：

Person.prototype

Answer 2

您可以尝试intercepting来自Person资源的响应并增加响应。像这样：

app.factory('Person', ['$resource', function($resource) {
  function getFullName(){
      return this.name + ' ' + this.surname;
  };

  return $resource('api/path/:personId', {
    personId: '@_id'
      }, {
        update: {
          method: 'PUT'
        },
        'get': {method:'GET', isArray:false,interceptor:{
              'response': function(response) {
                  response.fullname = getFullName; //augment the response with our function
                  return response;
               }
         }}
      });
}]);

Answer 3

如果您只需要派生属性用于显示目的，则可以创建显示过滤器，而不是使用冗余数据加载模型：

app.filter('personFullName', function() {
  return function(person) {
    return person.name + " " + person.surname;
  };
})

然后在模板中引用过滤器：

<div>
  <p>{{person | personFullName}}</p>
  <p>- should match -</p>
  <p>{{person.name}} {{person.surname}}</p>
</div>

Answer 4

Khanh TO让我为我找到了一个合适的答案，但正如in this Angular ticket所解释的那样，在拦截器中，你必须处理并返回<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Fusion_CODFee', __DIR__ );而不是{{1} }}

这是一个解决方案（适用于Angular 1.4）：

response.resource

ngResource中的虚拟属性

4 个答案: