AJAX APIの呼び出し後に角型コントローラを更新するにはどうすればよいですか？

Question

私は天気予報アプリを作成しています.ng-repeatを使用してforecast.dayArrayを繰り返し、ページ内に別の日を作成します。

問題は、各「日」にデータを入力するために使用されたコントローラが、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

Answer 1

、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'); 
     }); 
}]); 

を独自のサービスにフェッチし、その新しいサービスをコントローラに注入します。

Answer 2

あなたは$httpサービスを使用する必要があります。これをコントローラレベルで注入するか、ファクトリ/サービスで抽象化することができます。あなたは$httpサービスhereを使用する方法について読むことができます

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

。あなたの例では

Answer 3

$ HTTPサービスを使用する必要はありません、あなたはまだ$スコープを使用して、角度のうちから範囲を更新することができます。$