Ionic HTTP请求延迟更新

Question

我有一个基本的离子应用程序列出了页面上的作业，当点击一个作业时，这会调用我的REST API并返回该作业中的人员。

我的问题是，当作业被点击时，页面加载时没有数据，然后如果我拉来刷新页面显示结果？

当页面显示时，我拉动刷新后，人们的结果应该已经不存在了吗？

有谁知道为什么我的结果不显示在网页加载？

我的工作列表

Job 1 <a href="#/job/1">Begin</a> 
Job 2 <a href="#/job/2">Begin</a> 
Job 3 <a href="#/job/3">Begin</a> 

当点击一个作业本加载我的状态&控制器

国家

.state('job', { 
     url: '/job/:jobID', 
     templateUrl: 'templates/job.html', 
     controller: 'jobCtrl' 
    }) 

控制器

.controller('jobCtrl', function($scope, $stateParams, $http, $state) { 

    $scope.jobId = $stateParams.jobID; 

    $scope.data = {}; 

    $http.get('https://domain/api/job?token=' + localStorage.getItem("token") + '&job_id=' + $scope.jobId).then(function(successResponse){ 

    $scope.return = successResponse; 
    $scope.data = $scope.return.data.data; 

    }, function(errorRepsonse){ 
     $scope.error = errorRepsonse; 
    }); 

    $scope.doRefresh = function() { 

    $http.get('https://domain/api/job?token=' + localStorage.getItem("token") + '&job_id=' + $scope.jobId).then(function(successResponse){ 

    $scope.return = successResponse; 
    $scope.data = $scope.return.data.data; 

    $scope.$broadcast('scroll.refreshComplete'); 

    }, function(errorRepsonse){ 
     $scope.error = errorRepsonse; 
    }); 

    }; 

}) 

显示人物结果的视图。

<ion-refresher 
    pulling-text="Pull to refresh..." 
    on-refresh="doRefresh()"> 
</ion-refresher> 

<ion-nav-back-button class="button-clear"> 
<i class="ion-arrow-left-c"></i> Back 
</ion-nav-back-button> 

<ion-list> 
    <ion-item class="item-remove-animate item-icon-right" ng-repeat="person in data" type="item-text-wrap"> 
     <h2>{{person.name }}</h2> 
    </ion-item> 
</ion-list> 

Answer 1

您可以使用解决

.state('job', { 
    url: '/job/:jobID', 
    templateUrl: 'templates/job.html', 
    controller: 'jobCtrl', 
    resolve: { 
     job: function($stateParams, $http){ 
      return $http.get(...).then(function(resp){ 
       ... 
       // return job data 
       }); 
     } 
    } 
}) 

... 

然后在你的控制器

.controller('jobCtrl', function($scope, job, $http, $state) { 
    $scope.job = job; 

你的控制器将只job运行后得到解决。 $http.get()返回一个承诺：

此外，您还可以同时加载

更新

为了把事情说清楚显示装载机。一旦诺言得到解决，那么你的控制器功能将被执行。最后，$http.get应该返回您想要在控制器内部使用的数据（在这种情况下是作业信息）。

这样您就不需要在控制器内异步启动信息获取。你的控制器从数据开始，应该保持简单。