函数中的 JavaScript 作用域或 AngularJS Promise $q

Question

我对 JS 函数和/或 Angularjs Promise 和 $q 的范围有疑问。我查了一些例子，但我根本不明白。

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

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

这是我的 Controller :

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

提前致谢。

Answer 1

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

尝试使用 Angular 提供的 $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
});