Web SQLで取得したデータをAngularJSを使って表示することができず、困っております。
解決策をご存知の方、ご教授頂けないでしょうか。
↓ page1.html
<ons-page id="page1">
<div ng-controller="hoge_Controller">
<ons-list ng-repeat ="item in items”>
{{item.name}}
</ons-list>
</div>
</ons-page>
↓ Controller.js
var app = angular.module('myApp', ['onsen']);
app.controller('hoge_Controller', function($scope){
$scope.items = getList();
});
function getList(){
alert('ここのアラートは表示される')
var storeList= [];
var db = window.openDatabase("Database", "1.0", "TDatabase", 200000);
alert('ここのアラートは表示されない')
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS hoge (id, name)');
tx.executeSql('INSERT INTO hoge(id,name) VALUES("1234","test")');
tx.executeSql('SELECT id , name FROM hoge', [], function (tx, result) {
for (var i = 0; i < result.rows.length; i++) {
storeList.push({'id' : result.rows.item(i).id.toString(), 'name' : result.rows.item(i).name.toString()});
}
//// ↓「1234」がアラートで表示される
//alert(result.rows.item(0).id.toString());
//※※※ ↓この配列を「page1.html」に表示したい ※※※
return storeList;
});
});
};
↓ index.html
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>
<script src="js/controller.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
ons.ready();
</script>
</head>
<body>
<ons-navigator
var="myNavigator"
page="page1.html">
</ons-navigator>
</body>
</html>
何卒よろしくお願いいたします。