ngResource 中的虚拟属性

Question

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

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

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

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

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

Khanh TO 让我找到了可行的答案，但是，正如in this Angular ticket 所解释的，在拦截器中，您必须处理并返回response.resource 而不是response。

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

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

return $resource(
    'api/path/:personId',
    {personId: '@_id'},
    {
        update: {method: 'PUT'},
        get: {
            method: 'GET',
            isArray: false,
            interceptor: {
                response: function(response) {
                    var resource = response.resource;
                    resource.fullname = resource.name + ' ' + resource.surname;
                    return resource;
                }
            }
        }
    });
}]);

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

根据文档，$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() 的相当新的浏览器并将上面的Person.prototype 行替换为：

Object.defineProperty(
    Person.prototype,
    "fullname",
    {get: function() { return this.name + " " + this.surname; }}
);