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>

点击作业时，会加载我的状态＆amp;控制器

国家

.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

您可以使用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应返回您要在控制器中使用的数据（在本例中为作业信息）。

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

离子HTTP请求延迟更新

1 个答案: