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