Angular.js가 $ http.get에서 검색된 객체의 배열을 표시하지 않습니다.

Question

저는 angular.js를 처음 사용하고 있으며 $http.get 및 $http.post과 같은 $ http 함수를 사용하는 방법을 이해하려고합니다.

Java Rest 서비스를 통해 MySQL 데이터베이스에서 메시지를 검색하는 매우 간단한 앱이 있습니다. 내가 볼

function MessageController($scope, $http) { 
    $scope.getAll = function(callback) { 
    $http.get('/messages').success(function(response) { callback(response); }); 
    } 

    $scope.messages = $scope.getAll(function(data) { return JSON.stringify(data); }); 
} 

:

<div ng-controller="MessageController"> 
    <ul> 
    <li ng-repeat="m in messages">{{m.content}}</li> 
    </ul> 
</div> 

그리고 내 컨트롤러가 같은 외모 : 나는 NG 반복과 같이 사용하여 목록을 시도하고

[ 
    {id:1, content:"Hello World!"}, 
    {id:2, content:"Testing 1, 2, 3..."}, 
    {id:3, content:"I am from the database"} 
] 

: 데이터는 같은 외모를 반환 호출은 메시지 객체의 배열을 제대로 리턴하고 콜백 함수 내에서 콘솔로 출력 할 수 있지만 어떤 이유인지 그들은 ng-repeat에 표시되지 않습니다. 수동으로 메시지 목록을 만들 때이 기능을 사용할 수 있었지만 $http.get 조각을 도입하면 작동이 중지되었습니다.

내가 누락 된 항목이 있습니까?

편집 : 난 당신이 코드가 작동하지만 다음과 같은 작업을해야되지 왜 왔는지 모르겠어요 angular.js 버전 1.2.19

Answer 1

는 AngularJS와 버전 1.2 당으로, 배열은 약속 (migration notes 참조)에서 (기본적으로) 더 이상 풀어되지 않습니다. 나는 그것이 Objects으로 여전히 작동하는 것을 보았지만, 문서에 따르면 그 것에 의존해서는 안됩니다.

대신 $resource을 사용해야합니다. 리소스는 더 이상 약속을 반환하지 않지만 '미래'의 객체는 반환합니다. 실제로 이것은 REST 호출에 따라 빈 객체 또는 배열을 의미하며 REST 호출이 해결되면 자체를 채 웁니다 (example). 귀하의 경우에는

는 다음 (의사)과 같이 될 것이다 :

function MessageController($scope, $resource) { 
    var resource = $resource('/messages'); 
    $scope.messages = resource.query(function (data) { 
     return JSON.stringify(data); // is this really necessary, though? 
    }); 
    // $scope.messages = resource.query(); // should be enough 
} 

당신은 그에 대한 ngResource 모듈 의존성을 (색인에 각-resource.js을 포함하는 것을 잊지 마세요해야합니다. html) :

Answer 2

을 사용하고 있습니다. $scope은 콜백에서 업데이트됩니다.

function MessageController($scope, $http) { 
    $scope.getAll = function(callback) { 
    $http.get('/messages').success(function(response) { callback(response); }); 
    } 

    $scope.getAll(function(data) { $scope.messages = JSON.stringify(data); }); 
} 

Answer 3

$ gett http 호출의 success 함수 안에 $ scope.messages 변수에 값을 할당해야합니다. 이런 식으로 뭔가 : (plunker 참조)

var app = angular.module('plunker', []); 

app.controller('MessageController', function($scope, $http) { 


    $scope.getAll = function() { 
    $http.get('data.json').success(function(response) { 
     $scope.messages = response; 
    }); 
    } 

    $scope.getAll(); 

}); 

Answer 4

내가 함께 해결 : 전화 후

• ,

  $scope.myRender = false; 
  

• 변수

  그런 다음 호출을 초기화 ...후 성공 :

  $scope.myRender = true; 
  

과 HTML ng-if="myRender" ng-model="myModel"

행운을 사용!