2013-04-18 20 views
8

PhoneGap(Androidデバイス用)を使用して簡単なToDoアプリケーションを作成しようとしています。また、データバインディングにAngularJSを使用しました。
データベースに保存されているタスクの一覧を表示します。私がクロムデバッガでデバッグすると、SQL要求が動作するのがわかりますが、エミュレータまたはデバイス上でアプリケーションを起動すると何も表示されません。ビューが更新されない理由を

DbCtrl.jsビューを更新できません。データバインディングが機能しません - AngularjsとPhoneGap

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> 

誰か知っていますか?私たちは周りに何か方法がありますか?

+0

「result.rows」にバインドしようとすると、次のエラーが表示されます。エラー:リピーターの重複は許可されません。リピーター:アイテムのアイテムキー:未定義:定義されていない私は自分の仕組みが機能しているかどうか不思議です。私は行をループし、別の配列に各項目を押しても動作します。 – lucuma

答えて

9

これは、クエリが非同期であるために発生しています。モデルを更新したら、ダイジェストをトリガーして、角度でビューを更新できるようにする必要があります。

+2

ありがとう、今はうまくいきます! – axvo

関連する問題