Javascript 角度SPA未显示状态激活的API数据

我有一个Angular.js单页应用程序（Ionic Framework）与Rails后端通信

我使用

$http

服务从后端API获取数据

我面临着一个问题，它有时不显示从后端获取的数据，从而降低了自身的集中度。我启动应用程序，发出

$http.get

调用并返回数据（我可以在日志中看到），但没有显示。 因此，在调用数据应用程序时，会激活状态，该状态应显示返回的数据（在html模板中，通过ng repeat…），该状态为空

如果我随后更改应用程序状态并返回到以前的状态，则会显示数据。 当我使用Angular的$resource服务时（如此处：），我会获取并显示数据，但后来遇到一些问题，因此无法使用

$resource

我假设模板是空的，因为它是在实际从API返回数据之前显示的。我如何解决这个问题？我已经尝试了我能想到的一切，各种口味的$http.get、.success（）或.then（）、承诺，甚至

$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> 

敌人名称

将$http调用放在all（）函数中。http调用是异步的。当值为null时，返回值。调用API后，变量就是您的数据。因此，现在尝试在http调用完成后执行它（然后）。然后返回var敌人

尝试：

---

感谢m1crdy，它看起来是合乎逻辑和合理的，但是，我已经尝试过了，它仍然没有第一次显示数据。我还添加了一个敌人=resp.data；就在敌人归来之前；所以它可以工作，但仍然是同一个错误，我的敌人var在第一次调用时始终为null:（您是否尝试删除[code]var敌人=null；[/code]？是的，它不工作-记录“敌人未定义”。我已将其移动到all函数中-相同的错误。但是，我看到的是，执行顺序与预期不同。就在执行

$http.get

之前，程序流返回到控制器？因此，为了解释，我们有

敌人。all（）

从控制器调用，然后在执行

$http.get

之前的all函数中，流被返回到控制器，其中记录了我的调试消息（此时为空），只有这样我才执行了

$http.get

和

。然后（）

已登录。我已经能够使用以下方法获得所需的行为：1放弃服务。js 2以以下方式更改controller.js:

.controller（'EnemiesCtrl'，function（$scope，$http）{$http.get（'http://http://localhost:3000/home/api）。然后（函数（resp）{$scope.denties=resp.data；}，函数（err）{alert（'Error:'+err.status）；//err.status将包含状态代码}）

可能有点混乱，但我现在找不到更好的解决方案。感谢您为解决方案m1crdy指明了正确的方向！

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