Angular SPA在狀態激活時未顯示API數據

Question

我有一個與Rails后端通信的Angular.js單頁應用程序應用程序（離子框架）。

我使用$http服務從后端API獲取數據。

我面臨的一個問題是，有時不顯示從后端獲取的數據，這會使其本身變得不清晰。 我啟動應用程序，發出$http.get調用並返回數據（我可以在日志中看到它），但未顯示。 因此，在調用數據應用程序時，會激活狀態，該狀態應顯示返回的數據（通過ng-repeat在html模板中…），並且為空。

如果然后更改應用程序狀態並返回到先前的狀態，則會顯示數據。 當我使用Angular的$ resource服務時（例如： 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調用是異步的。 如果為null，則返回敵人var。 調用您的API后，敵人var是您的數據。 因此，現在嘗試完成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);
         });
     }
    }