Angular/Ionic 和异步 SQLite - 确保数据工厂在返回前初始化

我正在使用 Ionic 编写 PhoneGap/Cordova 应用程序，并使用 SQLite（与 ngCordova）进行持久存储。该应用程序的核心是从 SQLite 数据库检索的项目的滚动列表。

列表控制器.js

.controller('ListCtrl', [
  '$scope',
  'dataFactory',
  function($scope, dataFactory) {

    var items = dataFactory.getAllItems().then(function(data){
      $scope.allItems = data;
    });

  }
]);

数据工厂.js

.factory('dataFactory', [function($window, $log, $q, $cordovaSQLite, dummyDataGenerator){    

  var db_;

  // ...lots of SQLite fun in here
  // cascading async callbacks to load the database and inject dummy data
  var openDB_ = function(){...};
  var createTable_ = function(){...};
  // etc

  var getAllItems = function(){

    var q = $q.defer();
    $cordovaSQLite.execute(db_, sqlSelectString, []).then(
      function(results) {
        $log.log("SQL SELECT successful");
        var i, len, allItems = [];
        for(i = 0, len = results.rows.length; i < len; i++) {
          allItems.push(results.rows.item(i));
        }
        q.resolve(allItems);
      },
      function (err) {
        q.reject(err);
      }
    );
    return q.promise;
  };

  return { getAllItems: getAllItems };
]}); // <-- factory

最初我是立即返回工厂。控制器做了getAllItems()它在数据准备好之前运行。视图最初是空的，仅显示一秒钟后返回路线时的任何内容getAllItems()

因此，我尝试通过添加factoryReady()函数来延迟工厂的返回，并且仅在所有内部数据库内容准备就绪后才调用它

var factoryReady = function(){
  return {
    getAllItems: getAllItems
  };
};

现在有一个未定义的错误entire第一次调用时工厂不可用，而不是getAllItems()只是空手而归。我可以看到 SQL 数据库正在正确写入，但 Angular 在完成之前抛出了异常。

我现在意识到这是可以预见的，我读过这篇文章AngularJS：使用异步数据初始化服务 https://stackoverflow.com/questions/16286605/initialize-angularjs-service-with-asynchronous-data但不太明白如何实现排名最高的答案（作者：joakimbl）

公开服务并确保在内部异步内容完成之前控制器不会调用它的最佳方法是什么？我是否需要将整个服务作为承诺返回，而不仅仅是结果getAllItems？我尝试过这个，但现在很困惑。谢谢。

EDIT

我还研究过使用 ui-routerresolve加载视图时http://blog.brunscopelliti.com/show-route-only-after-all-promises-are-resolved http://blog.brunoscopelliti.com/show-route-only-after-all-promises-are-resolved但这并不能解决 SQL 数据/工厂的内部准备情况。如果我返回getAllCases方法，那么它仍然会立即被调用，SQL 数据库中还没有任何内容，SQL 查询返回一个空结果集，承诺解析并呈现视图。

最终设法让它发挥作用。在此发布此信息以供其他遇到此问题的人使用。

数据工厂.js

• 使用异步 SQL 调用重新设计了所有私有方法数据工厂.js回报承诺
• 创建一个公共 initDB 方法，该方法链接对私有方法的调用（例如openDB>>dropTable_>>createTable_ETC）。还回了一个承诺（空）

• 回initDB and getAllItems()立即从工厂

  .factory('dataFactory', [function($window, $log, $q, $cordovaSQLite, dummyDataGenerator){    
  
    var db_;
  
    // private methods - all return promises
  
    var openDB_ = function(dbName){
  
      var q = $q.defer();
      // ...call async SQL methods
      return q.promise;
    };
  
    var createTable_ = function(){
      var q = $q.defer();
      // ...call async SQL methods
      return q.promise;               
    };
  
    // ...etc
  
    // public methods
  
    var initDB = function(){
  
      var q = $q.defer();
      // successively call private methods, chaining to next with .then()
      openDB_("myDB").then(function(db){
        var schema = "...SQL schema here..."
        dropTable_(db, "FirstTable", schema).then(function(tableName){
          // ...etc
          // when all done, resolve the promise
          q.resolve();
        })
      })
      return q.promise;
    }
  
    var getAllItems = function(){
  
      var q = $q.defer();
      // ...call async SQL methods
      return q.promise;
    };
  
    return {
      initDB: initDB,
      getAllItems: getAllItems 
    };
  
  ]}); // <-- factory
  

app.js

• 使用了resolve的能力用户界面路由器
• 我之前的尝试没有正确注入承诺
• Added a resolve到顶级抽象状态以触发对initDB
• 注入承诺来自initDB到子状态的resolve object

• 将解析对象注入到控制器中

  // 应用路由（使用 ui-router） .config(函数($stateProvider, $urlRouterProvider){

  $stateProvider
  
    // top-level abstract state that houses Ionic side menu & nav
    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: "templates/sideMenu.html",
      resolve: {
        dbReady: function($log, dataFactory){
          // (1) init the DB
          return dataFactory.initDB().then(function(){
            $log.log("initDB promise resolved");
        });
      }
    }
  })
  
  // the following states are all child states of app
  
  .state('app.items', {
    url: "/items",
    views: {
      menuContent: {
        templateUrl: "templates/gbCaseList.html",
        // (3) now we can inject the items promise into our controller
        controller: function($scope, $log, items){
          // (4) uses resolved items variable injected by ui-router
          $scope.allItems = items;
        }
      }
    },
    resolve: {
      // (2) note that we MUST inject the dbReady promise, if we don't this will instantiate immediately
      items: function(dbReady, $log, dataFactory){
        // the following call returns a promise
        return dataFactory.getItems();
      }
    }
  })
  

现在一切都在工作。非常感谢这篇文章澄清了我对 ui-router 的使用仅在 AngularJS 中初始化完成后才运行控制器 https://stackoverflow.com/questions/27050496/run-controllers-only-after-initialization-is-complete-in-angularjs/27050497#27050497