TypeScript/angularJS HTTP GET 请求中的范围

Question

我是 typescript 和 angular.js 的新手，我正在为 http get 请求而苦苦挣扎。 我使用 DefinitelyTyped 来定义 Angular 的类型。

我的控制器代码如下所示：

module game.Controller {
    'use strict';

    export interface IGameScope extends ng.IScope {
        vm: GameCtrl;
    }

    export class GameCtrl {

        private bonus: any;
        private http: any;

        constructor($scope: IGameScope, $http: ng.IHttpService, $location: ng.ILocationService) { 
            $scope.vm = this;
            this.http = $http;
        }

        doBet() {
            this.http.get('http://localhost:9000/db').success(function(data: any, status: any) { 
                    this.bonus = data;
                }
            );
        }
    }

}

我的看法是这样的：

<button ng-click="vm.doBet()">bet</button>
<div><span>bonus: {{ vm.bonus }}</span></div>

当我在没有 http 请求的情况下更改奖励变量时，视图模型绑定工作正常。但是当我尝试在 get 请求的成功函数中更新奖励变量时，出现以下错误：

TypeError: Cannot set property 'bonus' of undefined

如何实现更新成功函数中的变量？

如果有更好/更清洁的方法或做法来更新请求数据，我也将不胜感激

Answer 1

这可以使用 TypeScript 的 lambda 表达式轻松完成：

doBet() {
    this.http.get('http://localhost:9000/db').success(
        (data, status) => this.bonus = data
    );
}

Answer 2

我没有使用过打字稿，但对我来说它看起来像是一个闭包/范围问题。您的成功回调是异步运行的，因此 this 的值在内部是不同的。尝试使用this 绑定函数回调。

this.http.get('http://localhost:9000/db').success(angular.bind(this,
    function(data: any, status: any) {this.bonus = data;});

Answer 3

您可以将方法放在构造函数中，以便像这样访问 $scope：

constructor($scope: IGameScope, $http: ng.IHttpService, $location: ng.ILocationService) {
    $scope.vm = this;
    this.http = $http;

    $scope.doBet = function() {
        this.http.get('http://localhost:9000/db').success(function (data: any, status: any) {
            $scope.bonus = data;
        });
    }
}

这是一个tutorial，关于使用 AngularJS 和 Typescript。

Answer 4

this.bonus = data;中的this其实是指success里面的回调函数。

您可以这样做：$scope.vm.bonus = data;