javascript - Can't update view, data-binding doesn't work - Angularjs and PhoneGap -
i trying make simple todo application using phonegap (for android device). used angularjs data-binding.
want display list of tasks saved in database. when debug chrome debugger, can see sql request worked nothing displays when launch application on emulator or on device.
dbctrl.js
var myapp = angular.module('myapp', []); function dbctrl($scope) { $scope.init = function() { document.addeventlistener("deviceready", ondeviceready, false); } function ondeviceready() { var db = window.opendatabase("database", "1.0", "cordova demo", 200000); db.transaction(populatedb, errordb, successdb); } function populatedb(tx) { tx.executesql('drop table if exists demo'); tx.executesql('create table if not exists demo (id unique, todo)'); tx.executesql('insert demo (id, todo) values (1, "first todo")'); tx.executesql('insert demo (id, todo) values (2, "second todo")'); } function errordb(err){ alert("error processing sql: "+err) } function successdb(){ var db = window.opendatabase("database", "1.0", "cordova demo", 200000); db.transaction(querydb, errordb); } // query database function querydb(tx) { tx.executesql('select * demo', [], querysuccess, errordb); } // query success callback function querysuccess(tx, results) { console.log("returned rows = " + results.rows.length); $scope.todos = results.rows; } $scope.init(); } dbindex.html
<body ng-app="myapp" > <div ng-controller="dbctrl"> <div> <h1>simpletodos</h1> </div> <div id="maincontent"> <ul ng-repeat="todo in todos"> <li>{{todo.id}}</li> </ul> </div> <div class="ui-bar"> <a href="edit.html">add note</a> </div> </div> <script src="../libs/cordova-2.5.0.js"></script> <script src="../libs/angular-1.0.5.js" type="text/javascript" ></script> <script src="dbctrl.js" type="text/javascript" ></script> </body> someone knows why view isn't updated? have way around?
this happening because query asynchronous. after updating model have trigger digest angular can update view.
// query success callback function querysuccess(tx, results) { console.log("returned rows = " + results.rows.length); $scope.todos = results.rows; $scope.$apply(); //trigger digest }
Comments
Post a Comment