AngularJS，$ http.get（）和“控制器为”

Question

我对整个AngularJS世界以及它是如何工作都很陌生，但是我很难让它按预期工作。 我知道这与我使用$http.get()并尝试将变量分配回我的控制器的方式有关，但我无法$http.get()它。

使用$scope而不是this我可以使它工作，但是如果可能的话，我更喜欢使用this所以我可以使用“controller as”

码：

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

    this.supplierList = {};

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

从这个例子中，我无法访问HTML页面中的supplierList内的$http.get请求的任何结果（即{{ supplier.supplierList[0].supplier_name }}没有显示任何结果）

我知道如果我将控制器更改为$scope我可以访问该数据（虽然没有使用与上面相同的格式），而且我也知道数据是通过使用console.log(this.supplierList)来填充的。 .success电话。

我也知道，它不工作的原因是因为上下文this改变从控制器内的内$http.get电话。

所以我的问题是这样的：如何使用this而不是scope来访问$ http.xxx调用的结果？ 我已经阅读了几个不同的来源，但大多数人都在讨论使用$scope和promise。 我还没有发现任何覆盖使用this （或宣布其var supplier = this ）。 任何帮助将非常感激。

谢谢，

Answer 1

始终存储this的变量引用，以便您没有上下文问题，然后在整个控制器中使用该变量而不是this变量

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

Answer 2

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

如果您在循环中多次调用$ http.get（），此技术特别有用。

Answer 3

this变量在JavaScript中很棘手。 执行回调函数时，您将不知道this是什么引用。 除非在某处记录。

您必须使用.bind(this)附加您自己的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));
});

请参阅绑定手册：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 4

使用ecmascript 6中提供的箭头功能可以解决this问题，并且您输入的内容更少。 您的示例如下所示：

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给一个变量，但更简洁。

Answer 5

我认为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;})
});