Javascript AngularJS、$http.get（）和"；控制器为；

我对AngularJS的整个世界以及它的工作方式都很陌生，但是我正在努力让它按预期工作。我知道这与我使用

$http.get（）

并试图将变量分配回控制器的方式有关，但我就是搞不清楚

使用

$scope

而不是

这个

我可以让它工作，但是如果可能的话，我更喜欢使用

这个

，这样我就可以使用“控制器作为”

代码：

在本例中，我无法从HTML页面中的

供应商列表中的
$http.get
请求访问任何结果（即
{{supplier.supplierList[0]。supplier\u name}
不显示任何结果）

我知道，如果我将控制器更改为
$scope
，我可以访问该数据（尽管没有使用与上面相同的格式），并且我还知道数据是通过
调用
中的
控制台.log（this.supplierList）
填充的

我也知道它不工作的原因是因为
this
的上下文从控制器内更改为
$http.get
调用内

所以我的问题是：如何使用
this
而不是
scope
访问$http.xxx调用的结果？我读过一些关于它的不同来源，但大多数都谈到使用
$scope
和承诺。我没有发现任何使用
此
（或使用
var supplier=此
声明）的保险单。任何帮助都将不胜感激

谢谢，
始终存储对
此
的变量引用，这样就不会出现上下文问题，然后在整个控制器中使用该变量而不是
此

app.controller('ctrlSuppliers', function($http){
    var vm = this;
    // now can forget using "this" and use variable instead
    vm.supplierList = {};

    $http.get("http://some_url_here") .success(function(response) {
         // no context issues since "vm" is in scope  
         vm.supplierList = response.records;
    });               
});

对于$http，您可以选择将自己的对象存储在
configObject
中，这是
$http.get（）
的可选第二个参数。然后，您可以使用此对象，因为它是
response
的属性

如果在一个循环中多次调用$http.get（），此技术尤其有用。
我认为charlietfl的答案是正确的，但我认为稍微扩展一下的解释可能会有所帮助

javascript中的“this”指的是当前函数调用的上下文。如果你看一下你的代码，你会发现这是在两个函数中使用的-

app.controller('ctrlSuppliers', function($http){

    //first use of this - used in the context of the controller function
    //In this case, this = the controller
    this.supplierList = {};

    $http.get("http://some_url_here")
            .success(function(response) {  
                //second use of this - used in the context of the http success function callback
                //this will likely not be the controller.  It's value depends on how the caller (the $http framework) invoked the method.
                this.supplierList = response.records;
             })
             ....

因为它们是两个不同的函数，它们可能有完全不同的上下文，所以“this”将指不同的对象（正如您所经历的）

处理这个问题的标准方法是保存第一个函数的调用上下文，以便在其他函数中使用@charlietfl的回答是实现这一点的好方法。我添加了他的代码以供参考

app.controller('ctrlSuppliers', function($http){
    var vm = this;
    vm.supplierList = {};

    $http.get("http://some_url_here")
            .success(function(response) {  vm.supplierList = response.records;})
});

这个
变量在JavaScript中很棘手。执行回调函数时，您将不知道此
引用的是什么。除非有文件记载

您必须使用
.bind（this）
来附加您自己的
此
值，以便在函数中使用

app.controller('ctrlSuppliers', function($http){
    this.supplierList = {};
    $http.get("http://some_url_here")
            .success(function(response) {
                 this.supplierList = response.records;
            }.bind(this))
            .error(function() { 
                 this.supplierList = [{supplier_id: 0, supplier_name: 'Error Getting  Details'}];
            }.bind(this));
});

参见绑定手册：

使用ecmascript 6中可用的箭头函数，
此
的问题已得到解决，您需要输入的内容更少。您的示例如下所示：

app.controller('ctrlSuppliers', function($http){
    this.supplierList = {};

    $http.get("http://some_url_here")
            .success(response => { this.supplierList = response.records; })
            .error(() => { this.supplierList = [{supplier_id: 0, supplier_name: 'Error Getting  Details'}]; });
});

结果相当于将
this
存储到一个变量中，但更简洁。
我确信我昨晚尝试了这种方法，但它对我无效，但是将
this
声明到一个变量中并引用该变量现在起作用了。非常简单-非常感谢所有阅读本文的人，成功现在被弃用了。使用。然后。只是提醒一下，$http调用通常不属于您的控制器！为了可重用性、稳定性和非无偿的依赖注入，将它们提取到一个服务中。@GrumbleSquatch对此表示感谢。正如我所说，我刚刚开始研究Angular，还没有时间研究所有的特性和功能，但是现在了解它可能会在我最终发现它们时为我节省很多时间
app.controller('ctrlSuppliers', function($http){
    this.supplierList = {};

    $http.get("http://some_url_here")
            .success(response => { this.supplierList = response.records; })
            .error(() => { this.supplierList = [{supplier_id: 0, supplier_name: 'Error Getting  Details'}]; });
});