unable to use services injected from constructor in methods in typescript using angularjs

Question

I have created an Angular Controller using SideWaffle's Template for Angular TypScript Controller.

My HomeController.ts file looks 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 am injecting multiple services like logger, q, http and resource. whatever i define in constructor is available to me in constructor. but when I go into child methods like GetEmployee(id). those services are not available anymore. So, In child method i get this.$log as undefined. I am not sure how does this works. my observation is that if a method is extending a class than it should have access to its context.

Solution I am looking is where I should be able to make use of all injected services in other child methods.

Answer 1

Solution to this issue is to assign function to a scope variable using arrow method.

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

This will generate required syntax for your controllers.

Answer 2

I don't see you initialized log. You have only $log property. I believe it will work if you initialize log with $log in constructor.