class scope is lost within the ajax success callback

Question

I have simple controller and service class that coded using TypeScript. However, from a success callback from ajax ($http service), the value of this keyword is undefined. So the code throws exception at line code (of the controller class):

this._$location.path('/index'); // error: the value of this is undefined

Please help me how I can solve the problem.

Codes for the controller: (The exception happens in method "login(): void")

/// <reference path="../../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../services/loginsrvc.ts" />

module angularWithTs {

    "use strict";


    export class LoginCtrl {
        static $inject = ["LoginSrvc", "SessionSrvc", "$location"];

        username: string;
        password: string;
        errorMessage: string;

        _loginSrvc: LoginSrvc;
        _sessionSrvc: SessionSrvc;
        _$location: ng.ILocationService; 

        constructor(loginSrvc: LoginSrvc, sessionSrvc: SessionSrvc, $location: ng.ILocationService) {
            this.username = "undefined";
            this.password = "undefined";
            this.errorMessage = "undefined";

            this._loginSrvc = loginSrvc;
            this._sessionSrvc = sessionSrvc;
            this._$location = $location;
        }

        login(): void {

            this._loginSrvc.getToken(this.username, this.password)
                .then(function (response) {
                    SessionSrvc.setToken(response.access_token); // store token in cookies
                    this._$location.path('/index'); // ERROR: the value of this is undefined

                }, function (errorResponse) {
                    //$scope.loginForm.errorMessage = errorResponse.error_description;
                });


        }

    }

    angular.module("angularWithTs").controller("LoginCtrl", LoginCtrl);
}

Codes for service:

    /// <reference path="sessionsrvc.ts" />
    /// <reference path="../models/authtoken.ts" />



module angularWithTs {
    "user strict";

    export class LoginSrvc {
        static $inject = ['$http', '$q', 'SessionSrvc'];
        _$http: ng.IHttpService;
        _$q: ng.IQService;
        _sessionSrvc: SessionSrvc;

        constructor($http: ng.IHttpService, $q: ng.IQService, sessionSrvc: SessionSrvc) {
            this._$http = $http;
            this._$q = $q;
            this._sessionSrvc = sessionSrvc;
        }


        getToken(username: string, password: string): ng.IPromise<AuthToken> {
            var result = this._$q.defer();

            var params = { grant_type: "password", userName: username, password: password };

            this._$http({
                method: 'POST',
                url: this._sessionSrvc.apiHost + 'token',
                transformRequest: function (obj) {
                    var str = [];
                    for (var p in obj)
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    return str.join("&");
                },
                data: params,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;' }
                })
                .success(response => {
                    result.resolve(response);
                })
                .error(errorResponse => {
                    result.reject(errorResponse);
                });

            return result.promise;
        }    
    }

    angular.module("angularWithTs").service("LoginSrvc", LoginSrvc);
}

Answer 1

In this part:

this._loginSrvc.getToken(this.username, this.password)
    .then(function (response) {
        SessionSrvc.setToken(response.access_token); // store token in cookies
        this._$location.path('/index'); // ERROR: the value of this is undefined
    }, function (errorResponse) {
        //$scope.loginForm.errorMessage = errorResponse.error_description;
    });

You are passing two functions as the resolve/reject for the promise, but these functions do not save the context of the this.

You can pass arrow functions:

this._loginSrvc.getToken(this.username, this.password)
    .then((response) => {
        SessionSrvc.setToken(response.access_token); // store token in cookies
        this._$location.path('/index'); // ERROR: the value of this is undefined
    }, (errorResponse) => {
        //$scope.loginForm.errorMessage = errorResponse.error_description;
    });

Or use bind:

this._loginSrvc.getToken(this.username, this.password)
    .then(function (response) {
        SessionSrvc.setToken(response.access_token); // store token in cookies
        this._$location.path('/index'); // ERROR: the value of this is undefined
    }.bind(this), function (errorResponse) {
        //$scope.loginForm.errorMessage = errorResponse.error_description;
    });