TypeScript/angularJS HTTP GET 请求中的范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18253306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scope in TypeScript/angularJS HTTP GET request
提问by pichsenmeister
I'm new to typescript and angular.js and I'm struggling with a http get request. I'm using DefinitelyTypedfor angular's type definitions.
我是 typescript 和 angular.js 的新手，我正在为 http get 请求苦苦挣扎。我在angular 的类型定义中使用了绝对类型。
My controller code looks like this:
我的控制器代码如下所示：
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;
}
);
}
}
}
and my view like this:
我的观点是这样的：
<button ng-click="vm.doBet()">bet</button>
<div><span>bonus: {{ vm.bonus }}</span></div>
the view-model binding works fine, when I change the bonus variable without the http request. But when I try to update the bonus variable in the success function of the get request, I get following error:
当我在没有 http 请求的情况下更改奖金变量时，视图模型绑定工作正常。但是当我尝试在 get 请求的成功函数中更新奖金变量时，我收到以下错误：
TypeError: Cannot set property 'bonus' of undefined
How can I achieve to update variables in the success function?
如何实现在成功函数中更新变量？
I also would appreciate any suggestion, if there's a better/cleaner way or practice to update data on requests
如果有更好/更清洁的方法或实践来更新请求中的数据，我也将不胜感激
回答by pichsenmeister
This can easily be done using TypeScript's lambda expression:
这可以使用 TypeScript 的 lambda 表达式轻松完成：
doBet() {
this.http.get('http://localhost:9000/db').success(
(data, status) => this.bonus = data
);
}
回答by AlwaysALearner
thisin this.bonus = data;actually refers to the callback function inside success.
thisinthis.bonus = data;其实是指里面的回调函数success。
Instead you can do like this: $scope.vm.bonus = data;
相反，您可以这样做： $scope.vm.bonus = data;
回答by zs2020
You can put the method in the constructor in order to access the $scope like this:
您可以将方法放在构造函数中，以便像这样访问 $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;
});
}
}
Here is a tutorialabout using AngularJS with Typescript.
这是一个关于在 Typescript 中使用 AngularJS的教程。
回答by 0xc0de
I haven't used typescript, but to me it looks like a closure/scope issue. Your success call back is running asynchronously so the value of thisis different inside. Try binding the function call back with this.
我没有使用过打字稿，但对我来说它看起来像是一个闭包/范围问题。您的成功回调是异步运行的，因此this内部的值不同。尝试将函数回调绑定到this.
this.http.get('http://localhost:9000/db').success(angular.bind(this,
function(data: any, status: any) {this.bonus = data;});
