Cannot use services injected from constructor into methods in typescript using angularjs

Question

I created an Angular controller using the SideWaffle template for the Angular TypScript Controller.

My HomeController.ts file is as follows.

interface IHomeControllerScope extends ng.IScope {        
    GetEmployee: (id) => ng.IPromise<Model.Employee>;        
}

interface IHomeController {
    Employee: any;
}

class HomeController implements IHomeController {
    static controllerId: string = "HomeController";

    Employee = this.$resource("api/employee/:Id", { Id: '@id' });
    constructor(
        private $scope: IHomeControllerScope,
        private $http: ng.IHttpService,
        private $resource: ng.resource.IResourceService,
        private $log: ng.ILogService,
        private $q: ng.IQService) {
        $scope.GetEmployee = this.GetEmployee;        
    }                
    GetEmployee(id) {            
        var defer = this.$q.defer<Model.Employee>();
        this.Employee.get({ Id: id },
            (result) => {
                this.log.debug(result);
                defer.resolve(result);
            }, (result) => {
                defer.reject(result);
            });
        return defer.promise;
    }            
}

app.controller(HomeController.controllerId, ['$scope', '$http', '$resource', '$log', '$q', ($scope, $http, $resource, $log, $q) =>
    new HomeController($scope, $http, $resource, $log, $q)
]);

TypeScript Compiler generated HomeController.js as follows

var HomeController = (function () {
    function HomeController($scope, $http, $resource, $log, $q) {
        this.$scope = $scope;
        this.$http = $http;
        this.$resource = $resource;
        this.$log = $log;
        this.$q = $q;
        this.Employee = this.$resource("api/employee/:Id", { Id: '@id' });
        $scope.GetEmployee = this.GetEmployee;
    }

    HomeController.prototype.GetEmployee = function (id) {            
        var defer = this.$q.defer();
        this.Employee.get({ Id: id }, function (result) {
            _this.log.debug(result);
            defer.resolve(result);
        }, function (result) {
            defer.reject(result);
        });
        return defer.promise;
    };

    HomeController.controllerId = "HomeController";
    return HomeController;
})();

app.controller(HomeController.controllerId, [
    '$scope', '$http', '$resource', '$log', '$q', function ($scope, $http, $resource, $log, $q) {
        return new HomeController($scope, $http, $resource, $log, $q);
    }
]);

As you can see, I introduce several services such as logger, q, http and resource. everything that I define in the constructor is available to me in the constructor. but when I go into child methods like GetEmployee (id). these services are no longer available. So, in the child method, I get this. $ Log as undefined. I'm not sure how this works. my observation is that if a method extends a class, it should have access to its context.

. , .

Answer 1

- .

    interface IHomeControllerScope extends ng.IScope {        
    GetEmployee: (id) => ng.IPromise<Model.Employee>;        
}

interface IHomeController {
    Employee: any;
}

class HomeController implements IHomeController {
    static controllerId: string = "HomeController";

    Employee = this.$resource("api/employee/:Id", { Id: '@id' });
    constructor(
        private $scope: IHomeControllerScope,
        private $http: ng.IHttpService,
        private $resource: ng.resource.IResourceService,
        private $log: ng.ILogService,
        private $q: ng.IQService) {
        **$scope.GetEmployee = () => this.GetEmployee ;**        
    }                
    GetEmployee(id) {            
        var defer = this.$q.defer<Model.Employee>();
        this.Employee.get({ Id: id },
            (result) => {
                this.log.debug(result);
                defer.resolve(result);
            }, (result) => {
                defer.reject(result);
            });
        return defer.promise;
    }            
}

app.controller(HomeController.controllerId, ['$scope', '$http', '$resource', '$log', '$q', ($scope, $http, $resource, $log, $q) =>
    new HomeController($scope, $http, $resource, $log, $q)
]);

.

Answer 2

, log. $log. , , log $log .