Angular SPA가 상태 활성화시 API 데이터를 표시하지 않음

Question

레일 백엔드와 통신하는 Angular.js 단일 페이지 응용 프로그램 (Ionic Framework)이 있습니다.

$http 서비스를 사용하여 백엔드 API에서 데이터를 가져옵니다.

때때로 나는 백엔드에서 가져온 데이터를 보여주지 않아서 스스로를 시연하는 문제에 직면 해 있습니다. 앱을 시작하면 $http.get 호출이 발행되고 데이터가 반환됩니다 (로그에서 볼 수 있음). 표시되지 않습니다. 그래서 데이터 앱을 호출하면 반환 된 데이터가 표시되어야하는 상태가 활성화되고 (ng-repeat ...를 통해 html 템플릿에 있음) 빈 상태가됩니다.

그런 다음 앱 상태를 변경하고 이전 상태로 돌아 가면 데이터가 표시됩니다. Angular의 $ 리소스 서비스 (예 : http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/)를 사용하면 데이터를 가져 와서 표시하지만 나중에 문제가 발생하여 $resource을 사용할 수 없습니다.

실제로 데이터가 API에서 반환되기 전에 템플릿이 표시되어 있기 때문에 템플릿이 비어 있다고 가정합니다. 이 문제를 어떻게 해결할 수 있습니까?

: 내가 생각할 수있는 모든 노력을했습니다, 모든 맛은 $ http.get, 일단 .success() 또는 그 때는(), 약속, 심지어 $timeout의 ... 다음은 실제 응용 프로그램에서 코드 조각은

controllers.js :

.controller('EnemiesCtrl', function($scope, $stateParams, Enemies) { 
    $scope.enemies = Enemies.all(window.localStorage['id']); 
}) 

services.js :

.factory('Enemies', ['$http', function($http, userId) {  
    // Use a resource here that returns a JSON array 
    var enemies = null; 
    userId = window.localStorage['id']; 

    $http({ 
    url:"http://localhost:3000/home/api", 
    method: "GET", 
    params: {user_id: userId} 
    }).then(function(resp){ 
     enemies = resp.data; 
     console.log('Success', resp.data);    
    },function(err) { 
     console.error('ERR', err.status); 
     alert('Error: '+err.status); 
     // err.status will contain the status code 
    }); 

    return { 
    all: function() {  
    return enemies; 
    } 
    } 

}]); 

template.html :

<ion-item ng-repeat="enemy in enemies" type="item-text-wrap" href="#/tab/place/{{enemy.id}}"> 
    enemy.name</br>  
</ion-item> 

Answer 1

$ http 호출을 all() 함수에 두십시오. http 호출은 async입니다. 적 var는 null 일 때 반환됩니다. API 호출이 이루어지면 적들이 여러분의 데이터입니다. 이제 끝난 후에 http 호출을 실행 해 봅니다. 그런 다음, 적군을 돌려 보내십시오.

시도 :

return { 
    all: function() { 
     $http({ 
      url:"http://localhost:3000/home/api", 
      method: "GET", 
      params: {user_id: userId} 
     }).then(function(resp){ 
      var enemies = resp.data; 
      return enemies;   
      },function(err) { 
       console.error('ERR', err.status); 
       alert('Error: '+err.status); 
       // err.status will contain the status code 
       return(err.status); 
     }); 
    } 
    }