离子 HTTP 请求延迟更新

Question

我有一个基本的 ionic 应用程序，它在页面上列出作业，当单击作业时，它会调用我的 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() 返回一个承诺。一旦 promise 被解决，那么你的控制器函数就会被执行。最终，$http.get 应该返回您想要在控制器中使用的数据（在本例中为作业信息）。

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