Dawood Awan Dawood Awan - 3 months ago 15
TypeScript Question

TypeScript service is undefined when calling a function from common service

I am using TypeScript with Angular JS to write a common service which will handle the POST and GET Requests to a server.

This is what the service looks like:

module TBApp {

export class apiService {

static $inject = ['$http', 'notificationService'];

constructor(private $http, private notificationService: notificationService) {

}

get(url, config, success, failure) {

return this.$http.get(url, config)

.then(result => { this.handleResponse(result, success); }, result => { this.handleError(result, failure) });
}

post(url, data, success, failure) {

return this.$http.post(url, data)

.then(result => { this.handleResponse(result, success); }, result => { this.handleError(result, failure) });
}

handleResponse(result, success) {

this.notificationService.displaySuccess(result.data.message);

success(result);

}

handleError(result, failure) {

if (result.status === '401') {

this.notificationService.displayError('Authentication required.');

//TODO: redirect to login page

}
else if (failure !== null) {
failure(result);
}
}
}
}


so in the controller shown below I want to call
loginCompleted
on login success.

module TBApp {

export class loginController extends MyApp.BaseController {

membershipService: membershipService;
apiService: apiService;

static $inject = ['$scope', 'membershipService', 'apiService', '$location'];

constructor($scope, membershipService: membershipService, apiService: apiService, private $location) {
super($scope);

this.scope.user = new User(null, null);

this.membershipService = membershipService;
this.apiService = apiService;
}

login() {

// HERE: this.membershipService Is NOT NULL OR UNDEFINED

console.log(this.membershipService);


this.apiService.post('/api/account/authenticate', this.scope.user, this.loginCompleted, this.loginFailed);
}

loginCompleted(response) {

//This method will save the logged in user to cookies

//HERE : this.membershipService Is UNDEFINED

this.membershipService.saveCredentials(this.scope.user);

// redirect to home page

this.$location.path('/');
}

loginFailed(response) {
alert('login failed');
console.log(response);
}

}
}


The function gets called everything is working except for the
this.membershipService
is undefined inside the
loginCompleted()
function.

I think this is because the
loginCompleted()
function is called from inside the
apiService
, how can I fix it? what am i doing wrong?

Answer

It should be

this.apiService.post(
  '/api/account/authenticate',
  this.scope.user,
  this.loginCompleted.bind(this), this.loginFailed.bind(this)
)

Alternatively,

this.loginCompleted = this.loginCompleted.bind(this)
this.loginFailed = this.loginFailed.bind(this)

can be done in constructor for all callback/handler methods