Question

我遇到了一个问题，我想从openDatabase中获取数据并放入listview。一些帖子说$scope.$apply();放在$scope.items = $data;之后，但出现错误：[$rootScope:inprog] $apply already in progress。这是我的代码。

的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();
                })
            });
        }
    })
})();

Answer 1

您可以使用$scope.$evalAsync()代替$scope.$apply()。它将触发一个摘要循环：

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

Answer 2

经过一番研究，最后我找到了一个解决方案。不确定它是完美的解决方案。但它有效。试试吧。

(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
        }
    }

})
})();

AngularJS - 从openDatabase获取数据

2 个答案: