2013-04-18 27 views
8

Tôi đang cố gắng tạo một ứng dụng đơn giản bằng cách sử dụng PhoneGap (dành cho thiết bị Android). Tôi cũng sử dụng AngularJS để liên kết dữ liệu.
Tôi muốn hiển thị danh sách các tác vụ được lưu trong cơ sở dữ liệu. Khi tôi gỡ lỗi với trình gỡ lỗi chrome, tôi có thể thấy yêu cầu SQL hoạt động nhưng không có gì hiển thị khi tôi khởi chạy ứng dụng trên trình giả lập hoặc trên thiết bị.

DbCtrl.jsKhông thể cập nhật chế độ xem, ràng buộc dữ liệu không hoạt động - Angularjs và 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> 

Có người biết lý do tại sao xem không được cập nhật? Chúng ta có cách nào không?

+0

Khi tôi cố gắng liên kết với 'result.rows', tôi nhận được lỗi sau: Lỗi: Các bản sao trong bộ lặp không được phép. Lặp lại: mục trong mục khóa: undefined: undefined Tôi tò mò về cách thức hoạt động của bạn. Nếu tôi lặp qua các hàng và đẩy từng mục vào một mảng riêng biệt thì nó hoạt động. – lucuma

Trả lời

9

Điều này xảy ra vì truy vấn không đồng bộ. Sau khi cập nhật mô hình, bạn phải kích hoạt thông báo để góc có thể cập nhật chế độ xem.

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

Cảm ơn bạn rất nhiều, bây giờ nó hoạt động tốt! – axvo

Các vấn đề liên quan