Ionic HTTP-запрос с задержкой обновления

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.

Проблема у меня есть, что когда задание нажата страница загружается без данных изначально, то если я потяну, чтобы обновить страницу показывает результаты?

Как показывается страница результаты работы людей должны быть там уже не после того, как я потяну обновить?

Кто-нибудь знает, почему мои результаты не отображаются при загрузке страницы?

Список вакансий

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

  };

})

Представление, в котором отображаются результаты people.

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

1 ответ

  1. Можно использовать 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
                   });
            }
        }
    })
    
    ...
    

    И после этого в вашем регуляторе

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

    Контроллер будет работать только после jobразрешения.

    Также, вы можете показать затяжелитель пока нагружающ

    Обновить

    Чтобы прояснить ситуацию: $http.get()возвращает обещание. Как только обещание будет решено, то ваша функция контроллера будет выполнена. В конце концов, $http.getдолжен вернуть данные, которые вы хотите использовать внутри вашего контроллера (в данном случае — информацию о задании).

    Таким образом, вам не нужно начинать получать информацию асинхронно внутри контроллера. Ваш контроллер начинается с данных и должен быть простым.