AngularJS - 從openDatabase獲取數據

我有一個問題，我想從openDatabase中獲取數據並放入列表視圖。有些線程說要在$scope.items = $data;之後放$scope.$apply();，但發生錯誤：[$rootScope:inprog] $apply already in progress。這是我的代碼。AngularJS - 從openDatabase獲取數據

的index.html

<!doctype html> 
    <html lang="en" ng-app="app"> 

    <head> 
    </head> 
    <body>  
     <ons-navigator var="navi"> 
     <ons-page> 
      <ons-toolbar> 
      <div class="center">I Spent</div> 
       <div class="right" ng-controller="AddExpendController"> 
        <ons-toolbar-button ng-click=""> 
         <ons-icon icon="ion-plus" fixed-width="false" style="vertical-align: -4px;"></ons-icon> 
        </ons-toolbar-button> 
       </div> 
      </ons-toolbar> 

      <ons-list ng-controller="AppController"> 
       <ons-list-item class="item" ng-repeat="item in items" ng-click="showDetail($index)"> 
        <ons-row> 
         <ons-col width="60px"> 
          <div class="item-thum"></div> 
         </ons-col> 
         <ons-col> 
          <header> 
           <span class="item-title">$ {{item.e_cost}}</span> 
           <span class="item-label">{{item.e_created}}</span> 
          </header> 
          <p class="item-desc">{{item.e_memo}}</p> 
         </ons-col> 
        </ons-row> 
       </ons-list-item> 
     </ons-list> 
    </ons-page> 
    </ons-navigator> 
</body> 
</html>

index.js

(function() { 
    'use strict'; 
    var module = angular.module('app', ['onsen']); 
    var db = window.openDatabase("ispentdb", "1.0", "I Spending DB", 2000000); 
    module.factory('$data', function() { 
    var listItems = []; 
    db.transaction(function queryDB(tx) { 
      tx.executeSql('DROP TABLE IF EXISTS exptable'); 
      tx.executeSql("Create Table IF NOT EXISTS exptable (eid INTEGER PRIMARY KEY, e_cost text, e_memo text, e_picture text, e_created text)"); 
      tx.executeSql('INSERT INTO exptable (e_cost, e_memo, e_created) VALUES ("2.30","testing","2015-4-13")', []); 
      tx.executeSql('INSERT INTO exptable (e_cost, e_memo, e_created) VALUES ("2.32","testing","2015-4-12")', []); 
      tx.executeSql('select * from exptable order by eid DESC', [], function (tx, result) { 
       console.log("Returned rows = " + result.rows.length); 
       for (var i = 0; i < result.rows.length; i++) { 
        listItems.push({ e_cost: result.rows.item(i).e_cost, e_memo: result.rows.item(i).e_memo, e_created: result.rows.item(i).e_created }); 
       } 
      }); 
    }); 
    console.log(listItems); 
    return listItems; 
}); 

module.controller('AppController', function ($scope, $data) { 
    console.log($data); 
    $scope.items = $data; 
}); 
})();

但有沒有問題，如果我用這個方法：

(function() { 
    'use strict'; 
    var module = angular.module('app', ['onsen']); 

    module.controller('AppController', function ($scope) { 
     var db = window.openDatabase("ispentdb", "1.0", "I Spending DB", 2000000); 
     db.transaction(function (tx) { 
      //tx.executeSql('DROP TABLE IF EXISTS exptable'); 
      tx.executeSql("Create Table IF NOT EXISTS exptable (eid INTEGER PRIMARY KEY, e_cost text, e_memo text, e_picture text, e_created text)"); 
      //tx.executeSql('INSERT INTO exptable (e_cost, e_memo, e_created) VALUES ("2.30","testing","2015-4-13")', []); 
      //tx.executeSql('INSERT INTO exptable (e_cost, e_memo, e_created) VALUES ("2.32","testing","2015-4-12")', []); 
     }, errorDB, successDB) 

     function errorDB(err) { 
      alert("Error processing SQL: " + err) 
     } 

     function successDB() { 
      db.transaction(function queryDB(tx) { 
       tx.executeSql('select * from exptable order by eid DESC', [], function querySuccess(tx, result) { 
        var listItems = []; 
        console.log("Returned rows = " + result.rows.length); 
        for (var i = 0; i < result.rows.length; i++) { 
         listItems.push({ e_cost: result.rows.item(i).e_cost, e_memo: result.rows.item(i).e_memo, e_created: result.rows.item(i).e_created }); 
        } 
        $scope.items = listItems; 
        $scope.$apply(); 
       }) 
      }); 
     } 
    }) 
})();

來源

2015-04-15 NyamO

什麼是'$ data'？它從何而來？你的代碼的第一次迭代有什麼問題（不是建議的答案）？ – Sacho

您可以使用$scope.$evalAsync()而不是$scope.$apply()。它會觸發一個消化循環：

$scope.$evalAsync(function() { 
    // Update data here. 
});

來源

2015-04-15 17:36:07

經過一點研究，最後我帶了一個解決方案。不確定它是完美的解決方案。但它工作。試試看看球員。

(function() { 
'use strict'; 
var module = angular.module('app', ['onsen']); 
var db = window.openDatabase("ispentdb", "1.0", "I Spending DB", 2000000); 

module.controller('AppController', function ($scope,readData) { 
    var ac = this; 
    ac.refreshList = function() { 
    readData.transaction().then(function (data) { 
     $scope.items = data; 
    })   
    }; 

    $scope.insexp = function() { 
     var cost = parseInt(document.getElementById('cost').value); 
     var memo = document.getElementById('memo').value; 
     if (cost == "") { 
      alert("Please insert number"); 
     } else { 
      cost = cost.toFixed(2); 
      db.transaction(function (tx) { 
       tx.executeSql('INSERT INTO exptable (e_cost, e_memo, e_created) VALUES (?,?,?)', [cost, memo, gettodayDate()]); 
      }); 
      dialog.hide(); 
      ac.refreshList(); 
      document.getElementById('cost').value = ""; 
      document.getElementById('memo').value = ""; 
     }  
    } 

    $scope.dialogs = {}; 
    $scope.show = function (dlg) { 
     if (!$scope.dialogs[dlg]) { 
      ons.createDialog(dlg).then(function (dialog) { 
       $scope.dialogs[dlg] = dialog; 
       dialog.show(); 
      }); 
     } 
     else { 
      $scope.dialogs[dlg].show(); 
     } 
    } 

function gettodayDate() { 
    var today = new Date(); 
    var dd = today.getDate(); 
    var mm = today.getMonth() + 1; //January is 0! 

    var yyyy = today.getFullYear(); 
    if (dd < 10) { 
     dd = '0' + dd 
    } 
    if (mm < 10) { 
     mm = '0' + mm 
    } 
    var today = yyyy + '-' + mm + '-' + dd; 

    return today; 
} 
    function init(){ 
     ac.refreshList(); 
    } 
    init(); 
}) 
module.factory('readData', function ($q) { 

    var localData = []; 
    var data = []; 
    var selectAllStatement = "SELECT * FROM exptable order by eid DESC"; 

    return { 
     transaction : function() { 
      var deferred = $q.defer() 

      db.transaction(function (tx) { 
       tx.executeSql("Create Table IF NOT EXISTS exptable (eid INTEGER PRIMARY KEY, e_cost text, e_memo text, e_picture text, e_created text)"); 
       tx.executeSql("SELECT * FROM exptable order by eid DESC", [], function (tx, result) { 
        var dataset = result.rows; 
        console.log(result.rows.length); 
        for (var i = 0; i < result.rows.length; i++) { 
         data[i] = dataset.item(i); 
        } 
        deferred.resolve(data) 
       }) 
      }) 
      return deferred.promise 
     } 
    } 

}) 
})();

來源

2015-04-16 07:10:43 NyamO

AngularJS - 從openDatabase獲取數據

回答

相關問題