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) I can only show it, after I leave that view and go back to that view again.
I 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.
Does anyone got an idea why?
more code? maybe codepen please?
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.getAllQuestionCatalogs();
}
}
}
}
})
service.js:
getAllQuestionCatalogs: 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;
});
});
});Ionic caches views, which can cause strange situations like the above. For your app.home state add cache: false
See if that resolves the problem, otherwise let us know. Everything else looks fine.
and please remove the $scope.$apply stuff.
You do not need that and this can cause a hard angularjs error.
with $scope.$on you are listening on angularjs events… so you are working in the angularjs context and so you need $scope.$apply.
I change my app.js file to this:
.state('app.home', {
url: '/home',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl',
resolve: {
//same as code above
}
}
}
}
})
But it still shows the same behaviour: I have to go out of the home view and back again.
Would you mind creating a code pen, I’ll be able to better assist.
Thanks,
Humm…It’s hard for me to do it right now, since the app retrieves data from couchDB and stuff. Any other idea I could try out would be much appreciated. For example is it possible to “simulte” the go-out-from-homve-view-and-go-back-to-home-view-again?
I would suggest replacing your current method with a simple resolve and an mock object, if that resolves and displays correctly then you know it’s specifically a couchDB issue and can focus on resolving that.
If you are updating data on couchDB and expecting it to update the view without going back and in again, the problem is the expectation of the resolve.
Once a promise has resolved it will always return the data it initially resolved with unless you clear the original promise, which happens when you come out of the state and back in.
Is that a better description of the problem you are experience?
Hummm…it works in the browser and I can retrieve the data (but have to leave the home view first). So, I don’t think there’s a problem with couchDB. But thanks for the suggestion.
I just ran my code in Firefox and in Chromium. On Chromium it would work. On Firefox it wouldn’t. It would throw me this error: Object { message: “InvalidStateError”, name: “error” }
Has anyone experienced that too? What’s the explanation for that?
What are you using to trigger the state change? Also it’s important to note firefox isn’t fully supported by Ionic.
Also it’s important to note firefox isn’t fully supported by Ionic.
I see. Then it doesn’t make sense to debug the app on FF, right?
What are you using to trigger the state change?
Simply AngularJS: “$scope.questioncatalogs” is tied bidirectionally to “qcs” with $scope.questioncatalogs = qcs. Whenever qcs changes $scope.questioncatalogs will change and the view will be updated via the following code:
<a class='item item-icon-left item-icon-right' ng-repeat='questioncatalog in questioncatalogs' type='item item-checkbox' ng-href='#'>
<icon class='icon' default='ion-compose' ios='ion-ios-compose-outline'></icon>
{{questioncatalog.name}}
</a>
I would use either Chrome or Safari for testing. It’s on their roadmap to support Firefox OS.
The error you are getting is about a $state don’t think the code you’ve shown is triggering states, are you doing that elsewhere?
That error was thrown somewhere else, yes. The app listens for changes in the local pouchDB. If there is a change it adds or updates the view.
But I don’t think that’s relevant here, because that error is only thrown in FF. In Chrome I don’t get that error at all.