TypeScript/angularJS HTTP GETリクエストの範囲

Question

私はtypescriptとangular.jsを使い慣れています。私はhttp getリクエストで苦労しています。 角度の型定義にDefinitelyTypedを使用しています。

私のコントローラのコードは次のようになります。

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

} 

と、このような私の意見：私はhttpリクエストなしでボーナス変数を変更したとき

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

ビュー・モデルバインディングは、正常に動作します。私はget要求の成功関数のボーナス変数を更新しようとすると、しかし、私はエラーを取得以下：

TypeError: Cannot set property 'bonus' of undefined 

をどのように私は成功関数の変数を更新するために達成することができますか？リクエストthis.bonus = data;で

Answer 1

これは簡単に活字体のラムダ式を使用して行うことができます。

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

Answer 2

this上のデータを更新するためのより良い/きれいな方法や練習があるかどう

また、私は実際にsuccessの内側にコールバック関数を指し、任意の提案をいただければ幸いです。

代わりに、あなたはこのように行うことができます：$scope.vm.bonus = data;

Answer 3

あなたはこのような$の範囲にアクセスするために、コンストラクタにメソッドを置くことができます：ここでは

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の使用に関するtutorialです。

Answer 4

私はtypescriptを使用していませんが、私にはクロージャ/スコープの問題のようです。成功のコールバックは非同期で実行されているので、thisの値は内部で異なります。関数呼び出しをthisでバインドしてみてください。

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