Javascript AngularJS处理promises和indexeddb-在内容出现在页面上后将其加载到控制器

Javascript AngularJS处理promises和indexeddb-在内容出现在页面上后将其加载到控制器,javascript,angularjs,promise,indexeddb,Javascript,Angularjs,Promise,Indexeddb,我一直在尝试让我的angular js页面与indexeddb一起工作,我正在尝试正确地完成它。到目前为止进展顺利,但我一直在努力实现我的承诺,在数据加载方面如我所期望的那样工作。我听从了这个建议,我想我理解它的意图,但我无法让它发挥作用。我认为问题在于它使用的是routeProvider,它需要ajax请求,而我并没有这样做,它完全是客户端的。我使用的是可以找到的angular indexedDB插件。这些是我正在做的相关部分 angular.module('characterApp',['n

我一直在尝试让我的angular js页面与indexeddb一起工作,我正在尝试正确地完成它。到目前为止进展顺利,但我一直在努力实现我的承诺,在数据加载方面如我所期望的那样工作。我听从了这个建议,我想我理解它的意图,但我无法让它发挥作用。我认为问题在于它使用的是routeProvider,它需要ajax请求,而我并没有这样做,它完全是客户端的。我使用的是可以找到的angular indexedDB插件。这些是我正在做的相关部分

angular.module('characterApp',['ngRoute','xc.indexedDB'])
.constant('dbName', 'character')
.constant('storeName', 'character')
.constant('version', 1)
.constant('emptyCharacter', {})
.value('jsPlumbInstance', {})
.config(function($indexedDBProvider, dbName, storeName, version) {
    $indexedDBProvider.connection(dbName)
    .upgradeDatabase(version, function(event, db, tx){
        db.createObjectStore(storeName, {keyPath: 'guid'});
    });
})
.config(function($routeProvider){
    console.log('Configuring route');
    $routeProvider
    .when('/js/angular/controllers/characterController.js', {
        controller:'characterController',
        resolve:{
            'characterData':function(DataService){
                console.log('resolving promise');
                return DataService.promise;
            }
        }
    })
})
.service('DataService', ['$indexedDB', 'storeName', 'emptyCharacter', function($indexedDB, storeName, newObject){

    var objects = [];
    var index = 0;

    var objectStore = $indexedDB.objectStore(storeName);
    var promise = objectStore.getAll().then(function(results) {
        objects = results;
        console.log("DB Objects loaded.");
    });
    console.log("Promise created");

    function getControllerObject(propertyName){
        return objects;
    }

    return {
        getControllerObject : getControllerObject,
        promise : promise
    };
}])
.controller('characterController', ['$scope', 'DataService', function($scope, DataService) {
    console.log('Promise is now resolved: ' + DataService.getControllerObject()
    );
}]);
当我运行它时,我的控制台输出以下内容:

Configuring route
characterApp.js:52 Promise created
characterController.js:2 Promise is now resolved: 
characterApp.js:50 DB Objects loaded.
但是,如果我理解,输出应该是:

Configuring route
characterApp.js:52 Promise created
characterApp.js:50 DB Objects loaded.
characterController.js:2 Promise is now resolved: 
如果有帮助,我的完整代码是打开的,但是您需要node.js来运行/www文件夹中的自定义server.js文件,以便正确加载所有内容。但是,如果您将内容从www/pages目录移动到index.html上的占位符中,就可以在其他地方以最小的工作量使其工作。或者事实上,你可以一起删除非标准标签,我认为它仍然可以工作。我怀疑所有这些都是不必要的,我只是不明白这些东西是如何工作的。我是个新手,但我正在努力学习如何用正确的方式做事

angular.module('characterApp',['ngRoute','xc.indexedDB'])
.constant('dbName', 'character')
.constant('storeName', 'character')
.constant('version', 1)
.constant('emptyCharacter', {})
.config(function($indexedDBProvider, dbName, storeName, version) {
    $indexedDBProvider.connection(dbName)
    .upgradeDatabase(version, function(event, db, tx){
        db.createObjectStore(storeName, {keyPath: 'guid'});
    });
})
.service('DataService', ['$indexedDB', 'storeName', 'emptyCharacter', function($indexedDB, storeName, newObject){

    var objects = [];
    var index = 0;

    var objectStore = $indexedDB.objectStore(storeName);
    var promise = objectStore.getAll()
    console.log("Promise created");

    function getControllerObject(propertyName){
        return objects;
    }

    return {
        getControllerObject : getControllerObject,
        promise : promise
    };
}])
.controller('characterController', ['$scope', 'DataService', function($scope, DataService) {
    var characters = [];
    DataService.promise.then(function(results){
        characters = results;
        $scope.character = characters[0];
        console.log("DB Objects loaded.");
    });
    );
}]);
我根本不需要routeprovider,我只是在用我的承诺做傻事