Ionic HTTP请求延迟更新
问题描述:
我有一个基本的离子应用程序列出了页面上的作业,当点击一个作业时,这会调用我的REST API并返回该作业中的人员。Ionic HTTP请求延迟更新
我的问题是,当作业被点击时,页面加载时没有数据,然后如果我拉来刷新页面显示结果?
当页面显示时,我拉动刷新后,人们的结果应该已经不存在了吗?
有谁知道为什么我的结果不显示在网页加载?
我的工作列表
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>
答
您可以使用解决
.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
应该返回您想要在控制器内部使用的数据(在这种情况下是作业信息)。
这样您就不需要在控制器内异步启动信息获取。你的控制器从数据开始,应该保持简单。
感谢您的回复@galchen - 如何从解决方案中返回工作数据?我不能使用$ scope,因为它没有定义? –
你不需要一个范围。范围用于将数据连接到模板。你只需'返回'它:'return resp.data.data;' – galchen
所以我会“返回successResponse”? –