Angular Provider / JS - How to access to 'uncle method' from $http().then() ?

Question

The problem is that i can't to access to set method :

  this.$get = function( $http ) {

    return 
    {
      set: function(UserData)
      {
        this.user = UserData ;
        localStorage.setItem('user', JSON.stringify( UserData ) );
      },

      get: function()
      {
        return this.user;
      },

      send: function(data)
      {
        $http.post(BASE_URL + 'user/login', data)
            .then( function( res ){

              // Error !

              this.set(res.data); 

              console.log(this); // return window object

              // Here i want to access to 'this.set()'
              // but i get error: 'ypeError: this.set is not a function'

            });
      }
    }
 }

I search for solution to access to this.set()

Thanks !

Answer 1

Save a copy of this outside of the callback and use that.

this.$get = function ($http) {
  return {

    set: function (UserData) {
      this.user = UserData;
      localStorage.setItem('user', JSON.stringify(UserData));
    },

    get: function () {
      return this.user;
    },

    send: function (data) {
      var _this = this;
      var url = BASE_URL + 'user/login';
      $http.post(url, data).then(function (res) {
        _this.set(res.data); 
      });
    }

  };
}

Using ES6:

this.$get = function ($http) {
  return {

    set(UserData) {
      this.user = UserData;
      localStorage.setItem('user', JSON.stringify(UserData));
    },

    get() {
      return this.user;
    },

    send(data) {
      let url = BASE_URL + 'user/login';
      $http.post(url, data).then(res => {
        this.set(res.data); 
      });
    }

  };
}