Angular $resource custom method

Question

I've followed the examples but apparently something is wrong when adding a custom method to the resource's prototype.

app.factory('Product',function ($resource,$cacheFactory) {
        var Product = $resource('/the/url/:id', {id: '@id'}),
            cache = $cacheFactory('Product'),
            products;
        Product.prototype.all = function(){
            products = cache.get('all');
            if(typeof products == 'undefined'){
                products = Product.query();
                cache.put('all',products);
            }
            return products;
        };
        return Product;
    })

In the controller I do $scope.products = Product.all(); but I get

TypeError: Object function Resource(value) {
    copy(value || {}, this);
} has no method 'all'

Can you provide the link for the example of adding to the $resource's prototype? I don't remember ever seeing that. — Ryan O'Neill
– Ryan O'Neill, Commented Mar 4, 2013 at 14:55

Stewie · Accepted Answer · 2014-02-05 16:10:33Z

12

Product.prototype.all defines an instance method.

You should define it as static method Product.all = function(){...].

Only then you can call it with $scope.products = Product.all();.

edited Feb 5, 2014 at 16:10

answered Mar 4, 2013 at 15:18

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

olanod Over a year ago

Thanks, I dont know why at this point I make that kind of mistake XD

Stewie Over a year ago

Understandable. These simple bugs often slip through easily in complex projects, or on long days.

Jason Aden · Accepted Answer · 2013-03-04 15:34:14Z

3

I think it's because you don't actually have an instance yet. You would need to do this:

$scope.products = new Product();
// now you can run the all function
$scope.products.all()

Your other option would be to define the all() method on the service level. Instead of adding to the prototype, which is only available after new Product(), you could modify like:

app.factory('Product',function ($resource,$cacheFactory) {
    var Product = $resource('/the/url/:id', {id: '@id'}),
        cache = $cacheFactory('Product'),
        products;
    Product.all = function(){
        products = cache.get('all');
        if(typeof products == 'undefined'){
            products = Product.query();
            cache.put('all',products);
        }
        return products;
    };
    Product.prototype.$all = function () {
        Product.all.call(this);
    }
    return Product;
})

This way you will have Product.all() on the resource and product.$all() on instances.

edited Mar 4, 2013 at 15:34

answered Mar 4, 2013 at 15:07

Jason Aden

2,8231 gold badge20 silver badges13 bronze badges

2 Comments

olanod Over a year ago

When the resource is injected isn't it an instance of the defined service? How can I do this without instantiating the service?

Jason Aden Over a year ago

When it's injected, you get an instance of the service, yes, but not an instance of a resource. Updating answer to include how you could call a service-level all() method.

Collectives™ on Stack Overflow

Angular $resource custom method

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related