JavaScript Scope或AngularJS在函数中承诺$ q

时间:2014-08-01 14:25:24

标签: javascript angularjs indexeddb

我对JS函数的范围和/或Angularjs的承诺和$ q有问题。我查了一些例子,但我根本没有得到它。

在我的应用中,我将一些数据保存在浏览器的indexeddb中。在前端有一个带自动完成功能的输入字段。输入字段的值转到我的angularjs Controller并调用一个函数。该函数应返回找到的值。从indexeddb中查找值的逻辑工作正常。

问题是我在将值推入数组之前返回我的数组。所以我不确定我是否需要在JavaScript范围内更改某些内容或使用Angularjs。

这是我的控制器:

 var AutocompleteController = function($scope, $http, $q) {

 $scope.getCodeFromDB = function(val) {
        var codes = [];
            var openDbRequest = indexedDB.open('testDb', 1);

            openDbRequest.onsuccess = function (e) {
                var db = e.target.result;
                var transaction = db.transaction("codeobjekt");

                transaction.objectStore("codeobjekt")
                    .openCursor(IDBKeyRange.bound(val, val + '\uffff'))
                    .onsuccess = function (e) {
                    var cursor = e.target.result;
                    if (cursor) {
                        codes.push(cursor.value.code); //gets filled
                        console.log(cursor.value.code);
                        cursor.continue();
                    }
                };
            };

        console.log(codes); //is empty
        return codes;
    };
};

提前致谢。

1 个答案:

答案 0 :(得分:3)

在您的代码中,您尝试使用返回后填充的数组。

尝试使用像这样的角度提供的$ q服务。

var AutocompleteController = function($scope, $http, $q) {

    $scope.getCodeFromDB = function(val) {
        var def= $q.defer(),
            codes = [],
        openDbRequest = indexedDB.open('testDb', 1);

        openDbRequest.onsuccess = function (e) {
        var db = e.target.result;
            var transaction = db.transaction("codeobjekt");

            transaction.objectStore("codeobjekt")
                .openCursor(IDBKeyRange.bound(val, val + '\uffff'))
                .onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    codes.push(cursor.value.code); //gets filled
                    console.log(cursor.value.code);
                    cursor.continue();
                }
                else {
                    //cursor end
                    def.resolve(codes);
                }

            };
        };

        return def.promise;
    };
};

用法

//usage

$scope.getCodeFromDB("value")
.then(function(codes) {
    //codes filled
});