9

我是 typescript 和 angular.js 的新手，我正在努力处理 http get 请求。我正在为angular的类型定义使用DefiniteTyped 。

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

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

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

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

4

4 回答 4

10

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

doBet() {
    this.http.get('http://localhost:9000/db').success(
        (data, status) => this.bonus = data
    );
}
于 2013-08-15T16:29:18.863 回答
1

您可以将方法放在构造函数中，以便像这样访问 $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;
        });
    }
}

这是一个关于使用 AngularJS 和 Typescript的教程。

于 2013-08-15T13:44:09.947 回答
1

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

this.http.get('http://localhost:9000/db').success(angular.bind(this,
    function(data: any, status: any) {this.bonus = data;});
于 2013-08-15T13:52:07.733 回答
1

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

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

于 2013-08-15T13:17:13.297 回答