如何在AJAX API調用後更新Angular控制器？

我正在創建一個天氣預報應用，使用ng-repeat在我的forecast.dayArray上迭代以在頁面中創建不同的日子。如何在AJAX API調用後更新Angular控制器？

問題是，用於填充每個「日期」中的數據的控制器未使用從ajax API調用分析的信息進行更新。相反，它只是保持它初始化的任何價值。

//Initialize 
var app = angular.module("weather", []); 

app.controller("ForecastController", function(){ 
    this.array = ['a','b','c']; 
}); 

ajaxCall(){ 
success: function(){ 
    app.controller.array.push('d'); //Doesn't seem to work 
};

你可以看到代碼在這裏全部：My Codepen

來源

2016-07-31 Vercaelus

在您的例子，app.controller是用於建立一個新的控制器的功能，所以在此行：

app.controller.array.push('d');

app.controller不合你"ForecastController"的參考。

一個簡單的方法來解決這一問題將是使從控制器內的AJAX調用，由$http服務便利：

app.controller("ForecastController", ["http", function ($http) { 
    this.array = ['a', 'b', 'c']; 

    $http 
     .get(...) 
     .then(function (response) { 
      this.array.push('d'); 
     }); 
}]);

雖然這工作，它通常被認爲是更好的做法是將數據分開獲取自己的服務並將新服務注入您的控制器。

來源

2016-07-31 02:23:04 akivajgordon

好吧，我相信我明白。但是，有沒有更簡單的方法？我曾假設（可能不正確）我可以通過點符號訪問任何控制器變量，並且這些更改會立即反映出來。是不是可以在任何隨機點更改我的值，並立即將這些更改反映在DOM中？ – Vercaelus

你肯定可以在任何時候改變它們，它們會在DOM中反映出來，但是你通常不會去涉及Angular如何存儲控制器的內部實現。例如，如果您想通過按鈕觸發該AJAX調用，則可以在標記中附加一個「ng-click」，以在您的控制器上調用一個方法來實際執行AJAX調用。 – akivajgordon

你將不得不使用$http服務。您可以在控制器級別注入，或者使用工廠/服務進行抽象。

var app = angular.module("weather", []); 

app.controller("ForecastController", ['$http', function($http) { 
    this.array = ['a', 'b', 'c']; 

    $http.get('someURLhere').then(function(response) { 
    //http call success! 
    this.array.push('d'); 
    }, function(error) { 
    //error here! handle the error 
    alert(error.data) 
    }) 
}]);

您可以如何使用$http服務here讀取。

來源

2016-07-31 02:12:42 CozyAzure

-2

這是沒有必要使用$ HTTP服務，你仍然可以從更新出角使用$範圍的範圍。$應用

來源

2016-07-31 02:28:06 xavvvier

如何在AJAX API調用後更新Angular控制器？

回答

相關問題