如何在控制器之前加载 .运行

Question

我正在使用预先填充的数据库在 Cordova 中开发一个应用程序，我试图将数据库搜索的结果放入 < select > 但没有在我的数据库中使用 ng-click html 文件（这是我迄今为止发现的解决问题的唯一方法） , 这是代码。

app.js

var ionicApp = angular.module('starter', ['ionic', 'ngCordova']);
var db = null;

ionicApp.run(function($ionicPlatform, $cordovaSQLite) {
 $ionicPlatform.ready(function() {
  if(window.cordova && window.cordova.plugins.Keyboard) {
   cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

   cordova.plugins.Keyboard.disableScroll(true);
  }
  if(window.StatusBar) {
    StatusBar.styleDefault();
  }
    window.plugins.sqlDB.copy("mydb.db","./plugins/me.rahul.plugins.sqlDB/WWW/sqlDB.js",function() { 
      db = $cordovaSQLite.openDB("mydb.db");
    }, function(error) {
       db = $cordovaSQLite.openDB("mydb.db");
    });
  });
});

ionicApp.controller('first-select', function($scope, $cordovaSQLite){
  $scope.options = [];
  $scope.select = function () {
    var query = "SELECT emp FROM adm_cia";
    $cordovaSQLite.execute(db, query,[]).then(function(res){
      if(res.rows.length > 0){
        var newOptions = [];
        for(var i = 0; i < res.rows.length; i++){
          var idn = (i+1).toString();
          newOptions.push({id: idn, name: res.rows.item(i).emp});
         }
      $scope.options = newOptions;
      } else {    }
    }, function(error){
  });
 }
})

和index.html

<!DOCTYPE html>
<html>
   <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link rel="stylesheet" href="lib/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css"/>
        <link href="css/style.css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <script src="js/angular-aside/docs/js/angular.min.js"></script>
        <script src="js/angular-route/angular-route.min.js"></script>
        <script src="lib/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
        <title>Login</title>
    </head>
    <body ng-app="starter" ng-controller="first-select" class="scrollable-content" ng-init="select()">
        <form id="login" method="get" action="indice.html">
            <div align="justify">
                <h1 class="color-letra">Nova Plus mobile</h1>
                <div class="form_input">
                    <input ng-click="select()" type="text" placeHolder="Ususario" name="username" requiered> <!-- this ng-click will be instead of the ng-init and is the only way that it works-->
                </div>
                <div class="form_input">
                    <input type="password" placeHolder="Contraseña" name="password" required>
                </div>
                <div class="form_input" style="margin-bottom : 30px">
                    <select name="empresas" class="empresas" required>
                        <option value="">Seleccione empresa</option>
                        <option value="1">prueba</option>
                        <option ng-repeat="option in options" value="{{option.id}}">{{option.name}}</option>
                    </select>
                </div>
                <div class="centrar">
                    <button type="submit" id="btn-default">Enviar</button>
                </div>
            </div>
        </form>
    </body>
 </html>

此代码将首先执行 select() 函数，然后再打开数据库，其想法是先打开数据库，然后再执行 select() 函数。

此致。

Answer 1

$ionicPlatform.ready 不是离子应用程序中要执行的第一件事。调用 $ionicPlatform.ready 函数是为了告诉您 cordova API 已准备好使用（它是 cordova deviceReady 事件的包装器）。这意味着 Angular 将在加载库后立即开始 bootstrapping 您的应用程序，而无需等待 $ionicPlatform.ready 回调。

您可以通过从 html 主体声明中删除 ng-app="starter" 标记来解决此问题，因为这会指示 angular 立即 bootstrap 您的应用程序。取而代之的是 bootstrap 在 ionic.Platform.ready 被触发并且你已经完成所有初始化之后手动应用程序。这里有一个示例代码

var ionicApp = angular.module('starter', ['ionic']);

ionicApp.controller('first-select', function($scope){
  $scope.select = function(){
    console.log("controller initialized");
    //  do your thing
  };
})

ionic.Platform.ready(function() {
  console.log("device ready!");

  // do your db init magic 

  angular.bootstrap(document.body, ['starter']);
});

这样，"device ready" 日志将始终在 "controller initialised" 日志之前写入控制台，并且不会出现竞争条件。

请注意，您不能将 ionicApp 模块的运行块用于 bootstrap 您的应用程序，因为运行块在 angular 具有 bootstrap应用程序。因此，如果您没有自动 bootstrapped 它，它将永远不会被调用。

如何在控制器之前加载 .运行

How to load the .run before the controller

html

javascript

angularjs

cordova

ionic