javascript - Can't update view, data-binding doesn't work - Angularjs and PhoneGap

I am trying to make a simple todo application using PhoneGap (for Android device). I also used AngularJS for data-binding.
I want to display the list of tasks saved in database. When I debug with chrome debugger, I can see the SQL request worked but nothing displays when I launch the application on an emulator or on the 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 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>

Someone knows why the view isn't updated? Do we have any way around?

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>

Someone knows why the view isn't updated? Do we have any way around?

Share Improve this question edited Feb 2, 2015 at 8:20 Kailas 7,5783 gold badges50 silver badges65 bronze badges asked Apr 18, 2013 at 16:09 axvo 8392 gold badges12 silver badges25 bronze badges

When I try to bind to result.rows I get the following error: Error: Duplicates in a repeater are not allowed. Repeater: item in items key: undefined:undefined I'm curious as to how yours is even working. If I loop through the rows and push each item into a separate array it works. – lucuma Commented Jun 6, 2013 at 20:53

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

This is happening because the query is asynchronous. After updating the model you have to trigger the digest so angular can update the view.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Can't update view, data-binding doesn't work - Angularjs and PhoneGap - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)