javascriptangularjsangularjs-scopeangularjs-resource

add a custom function on angular $resource


I have an angular resource that goes something like this

app.factory('User', function ($resource) {
    return $resource(
        '/api/user/:listCtrl:id/:docCtrl/', {
            id: '@id',
            listCtrl: '@listCtrl',
            docCtrl: '@docCtrl'
        }, {
            update: {
                method: 'PUT'
            },
            current: {
                method: 'GET',
                params: {
                    listCtrl: 'current'
                }
            },
            nearby: {
                method: 'GET',
                params: {
                    docCtrl: 'nearby'
                },
                isArray: true
            }
        }
    );
});

now i want to have full name in the view, can i add a method so that when i do this

$scope.user = User().current();

instead of doing the following in html

<p>{{ user.first_name }} {{ user.last_name }}</p>

i do this

<p>{{ user.get_full_name }}</p>

is there a way to add this property to the $resource?


Solution

  • You can add it as a property using transformResponse, but might I suggest just adding a method to every object that returns the combined first and last name:

    app.factory('User', function ($resource) {
        var User = $resource(
            '/api/user/:listCtrl:id/:docCtrl/', {
                id: '@id',
                listCtrl: '@listCtrl',
                docCtrl: '@docCtrl'
            }, {
                update: {
                    method: 'PUT'
                },
                current: {
                    method: 'GET',
                    params: {
                        listCtrl: 'current'
                    }
                },
                nearby: {
                    method: 'GET',
                    params: {
                        docCtrl: 'nearby'
                    },
                    isArray: true
                }
            }
        );
        // add any methods here using prototype
        User.prototype.get_full_name = function() {
            return this.first_name + ' ' + this.last_name;
        };
        return User;
    });
    

    Then use:

    <p>{{ user.get_full_name() }}</p>
    

    Any functions added using prototype will be added onto every object returned by your Service. It is a great way to add helper methods if you need to do complicated getting or setting of service properties.