Nie można zaktualizować widoku, powiązanie danych nie działa - Angularjs i PhoneGap

Próbuję wykonać prostą aplikację do obsługi przy użyciu PhoneGap (dla urządzenia z systemem Android). Użyłem również AngularJS do wiązania danych.
Chcę wyświetlić listę zadań zapisanych w bazie danych. Kiedy debuguję za pomocą chrome debuggera, widzę, że żądanie SQL zadziałało, ale nic nie wyświetla się po uruchomieniu aplikacji na emulatorze lub na urządzeniu.

DbCtrl.jsNie można zaktualizować widoku, powiązanie danych nie działa - Angularjs i 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>

Ktoś wie dlaczego widok nie jest aktualizowany? Czy mamy jakiś sposób?

Źródło

2013-04-18 axvo

Kiedy próbuję połączyć się z 'result.rows', pojawia się następujący błąd: Błąd: Duplikaty w repeater nie są dozwolone. Repeater: pozycja w kluczu items: undefined: undefined Ciekawi mnie, jak twoje działa. Jeśli przechodzę przez kolejne wiersze i wciskam każdy element do oddzielnej tablicy, to działa. – lucuma

Dzieje się tak, ponieważ zapytanie jest asynchroniczne. Po zaktualizowaniu modelu musisz wywołać syntezę, aby kątowa mogła zaktualizować widok.

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

Źródło

2013-04-18 16:26:35 Bema

Dziękuję bardzo, teraz działa dobrze! – axvo

Nie można zaktualizować widoku, powiązanie danych nie działa - Angularjs i PhoneGap

Odpowiedz

Powiązane problemy