离子HTTP请求延迟更新

Question

I've got a basic ionic application which lists jobs on a page, when a job is clicked this calls my REST API and returns people on that job.

The problem I have is that when the job is clicked the page loads without the data initially then if I pull to refresh the page shows the results?

As the page is shown the results of the people should be there already not after I pull to refresh?

Does anyone know why my results don't show on page load?

My job list

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

When a job is clicked this loads my state & controller

State

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

Controller

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

  };

})

The view which displays the people results.

<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

You can use resolve

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

...

And then in your controller

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

Your controller will only run after job is resolved.

Also, you can display a loader while loading

Update

To make things clear: $http.get() returns a promise. Once the promise is resolved then your controller function will be executed. Eventually, the $http.get should return the data that you want to use inside your controller (in this case- the job info).

This way you don't need to start fetching information asynchronously inside your controller. Your controller starts with the data and should be kept simple.