I've got an application that retrieves data from a promise object when it is loaded. In the browser (ionic serve) I can correctly display them. On the mobile device (ionic run android) though, I can only show it, after I leave that view and go back to that view again.
app.js:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'pages/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'pages/home.html',
controller: 'HomeCtrl',
resolve: {
qcs: function(myServiceFunction){
return myServiceFunction.getmyData();
}
}
}
}
})
service.js:
getMyData: function() {
var dfd = $q.defer();
db.allDocs({include_docs: true}, function(err, response) {
if(err) {
dfd.reject(err);
} else {
dfd.resolve(response);
}
});
return dfd.promise.then(function(response){
//some stuff
var myDataOutput = [];
return $q.all(promises).then(function(verifiedAnswersQC){
for (var verififiedQC = 0; verififiedQC < verifiedAnswersQC.length; verififiedQC++){
if (verifiedAnswersQC[verififiedQC].isAnswered == false){
myDataOutput.push(verifiedAnswersQC[verififiedQC]);
}
}
return myDataOutput;
});
}, function(err){
console.log(err);
});
},
controller.js:
myController.controller('HomeCtrl', function($scope, $state, $rootScope,
qcs, myServiceFunction) {
$scope.questioncatalogs = [];
//here it shows me the correct data. But it doesn't display it in the view
console.log("Home Enter: ", qcs);
$scope.$on('$ionicView.beforeEnter', function() {
$scope.questioncatalogs = qcs;
});
$scope.$on('addOrUpdateQuestionCatalog', function(event, qc) {
$scope.$apply(function() {
for (var i = 0; i < $scope.questioncatalogs.length; i++) {
if ($scope.questioncatalogs[i].id === qc.id) {
$scope.questioncatalogs[i] = qc;
return;
}
}
$scope.questioncatalogs.push(qc);
});
});
$scope.$on('syncActive', function(event, from) {
$scope.$apply(function() {
console.log('CONNECTED ' + from);
$scope.connection.notConnected = false;
});
});
});
I tried with apply()
$scope.$on('$ionicView.beforeEnter', function() {
console.log("before Enter", qcs.length);
$scope.myOutput = qcs;
setTimeout(function () {
$scope.$apply(function () {
$scope.myOutput = qcs;
});
$scope.myOutput = qcs;
$scope.$apply();
}, 2000);
});
I also did this:
.state('app.home', {
url: '/home',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl',
resolve: {
//same as code above
}
}
}
}
})
I also tried to refresh the view every 2 seconds. But it doesn't help. I have to go out of the view (via the menu) to another view and then go back to my home view.
I'm using Chromium, Firefox. Android 5.1.1