Thomas.Benz Thomas.Benz - 2 months ago 25
TypeScript Question

class scope is lost within the ajax success callback

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

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;
    });