In AngularJS how to modify service property from callback inside service itself

Question

I have a factory which does a http call and in the error callback I want to set a property a value, e.g this.password = null but this.password doesn't point to the password.

On the other hand, when I do the POST the data is sent fine: password: this.password

The scope of the password property should be different right? Or I'm missing something else?

.factory('LogInService', function($http) {

  return {
    username: null,
    password: null,
    logIn: function() {
      return $http({
        method: 'POST',
        url: 'http://my-domain/api/signin',
        data: {
          username: this.username,
          password: this.password
        }
      })
      .then(
        function(success){

        },
        function(err){
          // reset password field
          this.password = null;  // <-- not working
        }
      );
    }
  }
});

I could set all properties and methods to a var and then return it, but I'd rather method above. I mean:

var myService = {
    // my property and methods...
}

errorCallBack = function(){
  myService.password = null;
}

return myService;

Answer 1

You've got a scoping issue. Should be easy enough to do something like this. As always, untested, but seems like it would work.

.factory('LogInService', function($http) {

  return {
    username: null,
    password: null,
    logIn: function() {
      var svc = this; //<----
      return $http({
        method: 'POST',
        url: 'http://my-domain/api/signin',
        data: {
          username: svc.username, //<---
          password: svc.password  //<---
        }
      })
      .then(
        function(success){

        },
        function(err){
          // reset password field
          svc.password = null;  //<----
        }
      );
    }
  }
});