AngularJS service http success function using wrong “this” scope

Question

The success function of a $http.put doesn\'t have access to the this scope of the service it\'s being called inside. I need to update a property of the

Answer 1

Create a closure over a variable (often called that) that is assigned to this so that your callback functions will have access to your service object:

app.service('CatalogueService', function($rootScope, $http) {
    var that = this;
    ...
        ).success(function(data,status,headers,config) {
          that.items.push(data);

Here is a Plunker that uses $timeout instead of $http to demonstrate.

Answer 2

As far as I know, you can't. But I wouldn't try to run the service that way anyway. Here is a cleaner way:

.factory('CatalogueService', function($rootScope, $http) {
  // We first define a private API for our service.

  // Private vars.
  var items = [];

  // Private methods.
  function add( id ) {
    $http.put( $rootScope.apiURL, {id:id} )
    .success(function(data,status,headers,config) { items.push(data); })
    .then(function(response) { console.log(response.data); });
  }

  function store( obj ) {
    // do stuff
  }

  function remove( obj ) {
    // do stuff
  }

  // We now return a public API for our service.
  return {
    add: add,
    store: store,
    rm: remove
  };
};

This is a very common pattern of developing services in AngularJS and it doesn't require any use of this in these cases.