无法使用 AngularJS 在 TypeScript 的方法中使用从构造函数注入的服务

Question

我使用 SideWaffle 的 Template for Angular TypScript Controller 创建了一个 Angular 控制器。

我的 HomeController.ts 文件如下所示。

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 生成的 HomeController.js

如下所示

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

如

您所见，我正在注入多种服务，如记录器，q，http和资源。 我在构造函数中定义的任何内容都可以在构造函数中使用。 但是当我进入像 GetEmployee（id） 这样的子方法时。 这些服务不再可用。所以，在子方法中，我得到这个.$log未定义。我不确定这是如何工作的。我的观察是，如果一个方法正在扩展一个类，那么它应该可以访问它的上下文。

我

正在寻找的解决方案是我应该能够在其他子方法中使用所有注入的服务。

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它会起作用。