AJAX API 호출 후 Angular 컨트롤러를 업데이트하려면 어떻게해야합니까?

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 서비스를 사용할 필요가 없습니다, 당신은 여전히 ​​각도 사용하여 $ 범위의 밖으로의 범위를 업데이트 할 수 있습니다. $는