I'm currently working on a mobile application using PhoneGap and Angular.js, utilizing SQLite for local data storage. However, I've encountered an issue with rendering asynchronous data retrieved from SQLite. The problem lies in the fact that the data is not being displayed/rendered properly despite trying to use the $apply method.
Here's a snippet of my code:
function ProjectListCtrl($scope) {
$scope.test = function(){
db.transaction(queryDB, errorCB);
var test1 = function(db_result){
$scope.projects = db_result;
$scope.$apply(function(){ //trying to update the scope
$scope.projects = db_result;
});
console.log($scope.projects)
}
var make_result = function (tx, results, $scope) {
querySuccess(tx, results, $scope,test1 );
};
function querySuccess(tx, results, $scope, callback) {
var len = results.rows.length;
var db_result = [];
for (var i=0; i<len; i++){
db_result[i] = results.rows.item(i);
}
callback(db_result)
};
function queryDB(tx) {
tx.executeSql('SELECT * FROM Projects', [], make_result, errorCB);
}
}
}