Angular SPA在状态激活时未显示API数据

Question

I have an Angular.js Single Page Application app (Ionic Framework) communicating with the Rails backend.

I use a $http service to get data from my backend API.

I'm facing a problem which demontrates itself by sometimes not showing the data fetched from backend. I start the app, the $http.get call is issued and data is returned (I can see it in logs) but it's not shown. So, upon calling the data app activates the state which should show the data returned (in html template through ng-repeat…), and it's empty.

If I then change the app state and return to the previous state, the data is shown. When I use Angular's $resource service (like here: http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/ ) I get data fetched and showed but I run into some problems later and therefore cannot use $resource .

I suppose the template is empty because it is shown before the data is actually returned from API. How can I fix this problem? I've tried everything I could think of, all flavours of $http.get, .success() or .then(), promises, even $timeout ... Below are the code snippets from actual app:

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

Place your $http call in the all() function. The http call is async. The enemies var is returned when it´s null. After the call to your API is made, the enemies var is your data. So now try to execute the http call AFTER it´s finished (then). Then return the var enemies.

Try:

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