I create an ionic project with tabs that displays dynamic list using this code in 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];
}}
})
The problem is that my application didn't display the list at first when I load the page but only when i refresh it (with doRefresh) or when i go to other tab and back to the first one. Is there a solution to fix that ?
Thank you in advance
My code i 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);
});
and my view:
<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() makes an http request, which is asynchronous. You have no guaranties that data are available when you call all(). So all() can't return data. You have to pass a callback, something like that (not tested):
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])
})
}
}
}
And in you controller:
Interventions.all(function(interventions) {
$scope.interventions = interventions;
}
Interventions.get(iid,function(intervention) {
$scope.intervention = intervention;
}
You can find more informations about asynchronous here : How do I return the response from an asynchronous call?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.