如何在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

答

在您的例子，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'); 
     }); 
}]);

虽然这工作，它通常被认为是更好的做法是将数据分开获取自己的服务并将新服务注入您的控制器。

好吧，我相信我明白。但是，有没有更简单的方法？我曾假设（可能不正确）我可以通过点符号访问任何控制器变量，并且这些更改会立即反映出来。是不是可以在任何随机点更改我的值，并立即将这些更改反映在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读取。

答

这是没有必要使用$ HTTP服务，你仍然可以从更新出角使用$范围的范围。$应用

如何在AJAX API调用后更新Angular控制器？

相关推荐