While experimenting with typescript, I have encountered an issue that I can't seem to resolve. My project involves using Angular, so I will present my problem within that context.
Here is a snippet of my code:
class PersonCtrl{
private $scope: IPersonScope;
private $http: ng.IHttpService;
static $inject = ['$scope', '$http']
constructor($scope: IPersonScope, $http: ng.IHttpService) {
this.$scope = $scope;
this.$http = $http;
this.init();
}
init() : void {
this.$scope.fullName = 'Justin S.';
this.$scope.buttonClick = this.buttonClick;
console.log("-----------------Init------------------");
console.log(this);
}
buttonClick(): void {
console.log("-----------------ButtonClick------------------");
console.log(this.$http);
}
}
I am attempting to access the $http service when clicking a button. The buttonClick function is bound in the view, and I'm excluding the HTML code as it's not essential for this explanation.
Upon button click, my goal is to execute an AJAX call to the server. However, the issue lies in the fact that 'this' refers to the button's context in JavaScript, not the context of the PersonCtrl where I declared my private variables.
As a beginner in learning typescript, I acknowledge that there may be better approaches to solving this problem. If you have any suggestions or improvements, please feel free to share them with me.
How can I access $scope and $http within the buttonClick function?