Angularjs 方法中未定义Typescript构造函数参数

我正在努力思考如何将Typescript和Angularjs结合使用。我读过几篇博客文章和两个项目的文档，但都没有坚持下去

我有一个角度控制器，它有两个依赖项，$scope和一个我编写的名为greetingService的服务。我已经定义了一个主应用程序Angular模块，并将控制器和服务连接到该模块。我的Typescript构造函数中有日志语句，这样我就可以在浏览器中检查依赖项。在我的控制器和我的定制服务的构造函数中，依赖项被正确地注入。但是，在控制器中，当我尝试使用依赖项时，它是未定义的。我认为这个代码片段比我能解释的更好地说明了这个问题

declare var angular;

module App.Services {
    export class GreetingService {

        constructor(private $http) {
            console.log("In greeting service constructor");
            console.log($http);
        }

        getGreetingsPromise() {
            return this.$http.get('/greetings.json');
        }
    }
}

module App.Controllers {
    export class GreetingController {

        static $inject = ['$scope', 'greetingService'];
        constructor(public $scope, public greetingService: App.Services.GreetingService) {
            this.$scope.greeting = "This will be a greeting.";
            this.$scope.greet = this.greet;

            console.log(greetingService); // this is defined and looks right
        }

        greet(language: string) {
            console.log("Greeting...");
            console.log(this.$scope); // this is undefined
            console.log(this.greetingService); // this is undefined
            var greetingPromise = this.greetingService.getGreetingsPromise();
            greetingPromise.then(data => this.$scope.greeting = data[language]);
        }
    }
}


var mainApp = angular.module('mainApp', []);
mainApp.controller('greetingController', ['$scope', 'greetingService', App.Controllers.GreetingController]);
mainApp.service('greetingService', App.Services.GreetingService);

这是Angular模板（它正确地显示了在构造函数中初始化的“这将是一个问候语”）

{{greeting}
问候我

此行：

this.$scope.greet = this.greet

这就是问题所在。您只是将函数引用复制到一个scope属性，当使用scope

调用它时，this

将不是控制器实例，它由调用者确定（在您的情况下，

this

应该是

greet

函数中的作用域本身，当它从模板调用时），绑定函数除外。一个快速解决方法是使用。i、 e

this.$scope.greet=this.greet.bind（this）

用于创建绑定函数，函数引用绑定到控制器实例。您还可以使用箭头函数并将其指定为引用，这将强制TS将任何

this

转换为

this

缓存变量：

   greet = (language: string) => {
        console.log("Greeting...");
        console.log(this.$scope); // this is undefined
        console.log(this.greetingService); // this is undefined
        var greetingPromise = this.greetingService.getGreetingsPromise();
        greetingPromise.then(data => this.$scope.greeting = data[language]);
    }

理想情况下，如果您使用

控制器作为

（如果您的angular支持，如果不强烈建议升级）语法，而不是直接使用scope，则不需要执行所有这些操作

i、 e:

及

{{vm.greeting}
问候我

   greet = (language: string) => {
        console.log("Greeting...");
        console.log(this.$scope); // this is undefined
        console.log(this.greetingService); // this is undefined
        var greetingPromise = this.greetingService.getGreetingsPromise();
        greetingPromise.then(data => this.$scope.greeting = data[language]);
    }

export class GreetingController {
    greeting :string;

    static $inject = ['greetingService'];

    constructor(public greetingService: App.Services.GreetingService) {
        this.greeting = "This will be a greeting.";
    }

    greet(language: string) {
        var greetingPromise = this.greetingService.getGreetingsPromise();
        greetingPromise.then(data => this.greeting = data[language]);
    }
}

<div class="jumbotron">
    <div ng-controller="greetingController as vm">
        <p class="lead">{{vm.greeting}}</p>
        <button ng-click="vm.greet('english')">Greet me</button>
    </div>
</div>