Question

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

我使用$http服务从我的后端API获取数据。

我面临一个问题，即有时候没有显示从后端获取的数据而导致自身贬值。我启动应用程序，发出$http.get调用并返回数据（我可以在日志中看到它），但它没有显示。因此，在调用数据应用程序时，激活应显示返回数据的状态（在html模板中通过ng-repeat ...），并且它是空的。

如果我然后更改应用程序状态并返回到先前状态，则会显示数据。当我使用Angular的$ resource服务（比如这里：http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/）时，我获取了数据并显示但是我稍后遇到了一些问题，因此无法使用$resource。

我认为模板是空的，因为它是在实际从API返回数据之前显示的。我该如何解决这个问题？我已经尝试了我能想到的一切，所有 flavors 的$ http.get，.success（）或.then（），promises，甚至$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);
         });
     }
    }

Angular SPA未显示有关状态激活的API数据

1 个答案: