[英]Ionic tabs with dynamic lists
我创建一个带有选项卡的ionic项目,并使用services.js中的以下代码显示动态列表:
.factory('Interventions', function($http) {
var interventions = {};
$http({
method: 'POST',
url: 'http://172.20.1.1/list.php'
}).success(function(data, status, headers, config) {
interventions = data;
});
return {
all: function() {
return interventions;
},
get: function(iid) {
return interventions[iid];
}}
})
问题在于,我的应用程序在加载页面时最初不会显示列表,而仅在刷新页面(使用doRefresh)或进入其他选项卡并返回第一个页面时才显示。 有解决方案吗?
先感谢您
我的代码在ncontroller.js中:
.controller('InterventionCtrl', function($scope, $http, Interventions) {
$scope.interventions = Interventions.all();
$scope.doRefresh = function() {
$http.get('http://172.20.1.1/list.php')
.success(function(newItems) {
$scope.interventions = newItems;
})
.finally(function() {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
};
})
.controller('InterventionDetailCtrl', function($scope, $stateParams, Interventions) {
$scope.intervention = Interventions.get($stateParams.iid);
});
和我的看法:
<ion-view title="Interventions">
<ion-content>
<ion-list>
<ion-item ng-repeat="intervention in interventions" type="item-text-wrap" href="#/tab/interventions/{{intervention.ID}}">
<h3>{{intervention.Nom}}</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Interventions.all()发出一个异步的http请求。 您无法保证在调用all()时数据可用。 因此all()无法返回数据。 您必须传递一个回调,类似这样(未测试):
var interventions = {};
var doRequest = function(callback) {
$http({
method: 'POST',
url: 'http://172.20.1.1/list.php'
}).success(function(data, status, headers, config) {
interventions = data;
callback(data);
});
})
return {
all: function(callback) {
if (interventions) {
callback(interventions)
} else {
doRequest(callback)
}
},
get: function(iid,callback) {
if (interventions) {
callback(interventions[iid])
} else {
doRequest(function(data){
callback(data[iid])
})
}
}
}
在您的控制器中:
Interventions.all(function(interventions) {
$scope.interventions = interventions;
}
Interventions.get(iid,function(intervention) {
$scope.intervention = intervention;
}
您可以在此处找到有关异步的更多信息: 如何返回异步调用的响应?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.