4

我使用 SideWaffle 的 Angular TypScript 控制器模板创建了一个 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);
    }
]);

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

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

4

2 回答 2

2

此问题的解决方案是使用箭头方法将函数分配给范围变量。

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

这将为您的控制器生成所需的语法。

于 2014-04-25T07:46:06.940 回答
1

我没有看到你初始化log。你只有$log财产。我相信如果你在构造函数中初始化它会log起作用$log。

于 2014-02-11T11:33:15.110 回答