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

时间:2016-07-31 02:01:06

标签: javascript angularjs ajax

我创建了一个天气预报应用,使用ng-repeat迭代我的forecast.dayArray来创建页面中的不同日期。

问题是控制器用于填写每个"天的数据。没有使用从ajax API调用解析的信息进行更新。相反,它只保留初始化的任何值。

IJ.getInstance().repaint();
IJ.wait(1);

您可以在此处查看完整的代码:My Codepen

3 个答案:

答案 0 :(得分:0)

您必须使用$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

的信息

答案 1 :(得分:0)

在您的示例中,app.controller是一个用于设置新控制器的函数,因此在此行中:

  

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

app.controller不是对"ForecastController"的引用。

解决此问题的一种简单方法是在$http服务促进的控制器内进行AJAX调用:

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

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

虽然这样可行,但通常认为将数据提取分离到自己的服务并将新服务注入控制器是更好的做法。

答案 2 :(得分:-2)

没有必要使用$ http服务,你仍然可以使用$ scope更新范围。$ apply