AngularJS Request payload is always empty

Question

I have created a Angular resource that sends POST data to a web service. Here is my factory:

appServices.factory('Foo', function($resource) {
    var data = $resource(
      'http://localhost:3000/api/v1/foo.json',
      {},
      {
        'save': {
            method: 'POST', 
            cache: false
        }
      });
    return data;
});

Here's my Controller:

appControllers.controller('FooCtrl', function($scope, Foo, $location) {
    $scope.memberData = {};
    $scope.create = function() {
      var member = new Foo();
      member.$save( {}, { bar: bar });
      $location.url("/");
    };

});

When I submit the form in my client, it returns a 500 status. Looking into Firebug, I can see that my POST data payload always remains empty for some reason.

What am I doing wrong?

PS. I've added this to my config: $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';

Answer 1

If you want to issue a POST request to the member resource, you can use save() (without the $) and pass in your body as the first argument:

Foo.save({bar: 'bar'}, function () {
    // Callback
});

However, when creating a new resource instance, it is augmented with a $save() method (note the $). When you invoke this method, the instance itself is sent as the body. So you should change your code to:

var member = new Foo();
member['bar'] = 'bar';
member.$save(function () {
    // Callback 
});

Check this article for more information.