无法更新视图,数据绑定不起作用 – Angularjs和PhoneGap

我正在尝试使用PhoneGap(适用于Android设备)制作简单的待办事项应用程序。 我还使用AngularJS进行数据绑定。
我想显示保存在数据库中的任务列表。 当我使用chromedebugging器进行debugging时,可以看到SQL请求正常工作,但是在模拟器或设备上启动应用程序时没有任何显示。

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 INTO DEMO (id, todo) VALUES (1, "first todo")'); tx.executeSql('INSERT INTO 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 the database function queryDB(tx) { tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorDB); } // Query the 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> 

有人知道为什么视图没有更新? 我们有办法吗?

Related of "无法更新视图,数据绑定不起作用 – Angularjs和PhoneGap"

这是因为查询是asynchronous的。 在更新模型之后,您必须触发摘要,以便angular度更新视图。

 // Query the success callback function querySuccess(tx, results) { console.log("Returned rows = " + results.rows.length); $scope.todos = results.rows; $scope.$apply(); //trigger digest }