I'm new to TypeScript and I'm attempting to create an Angular.js directive using a TypeScript class. I want to utilize external Angular services in the directive's link function, which is called when the $watch function receives data. However, no matter what I do, the 'this' keyword always points to the global window object, making it impossible for me to access the injected services. Can someone please help me solve this issue? Below is my directive:
module Portal.MainMenu {
class MenuScrollDirective implements ng.IDirective {
static $inject = ["$timeout", "$window"];
constructor(private $timeout: ng.ITimeoutService, private $window: ng.IWindowService) { }
restrict = "EA";
scope = {
expanded: "=",
tplChanged: "=",
fullView: "="
};
link = ($scope: ng.IScope, el: IJQSlimScroll) => {
var settings = {
position: 'left',
size: '5px'
};
init();
function init() {
$scope.$watch('expanded',(cur, prev) => {
cur && adjustScroll();
});
}
function adjustScroll() {
var winH = this.$window.innerHeight //this - refers to Window here
//but I need to access service
this.$timeout(() => {
//need access to el here
}); //same here 'this' is global
}
}
angular.module('portal.mainMenu')
.directive('menuScroll', ($timeout: ng.ITimeoutService, $window: ng.IWindowService) => {
return new MenuScrollDirective($timeout, $window);
});
}