Question

我正在使用预先填充的数据库在Cordova中创建一个应用程序，我正在尝试将数据库搜索的结果放在＆lt;选择＆gt;但是没有在我的html文件中使用ng-click（这是我到目前为止找到解决问题的唯一方法）我尝试使用ng-init但它在我的控制器中执行函数之前.run是我加载我的地方db，这是代码。

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将在加载库后立即开始引导您的应用程序，而无需等待$ionicPlatform.ready回调。

您可以通过从html正文声明中删除ng-app="starter"标记来解决此问题，因为这会指示angular立即引导您的应用程序。而是在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']);
});

这样，“设备就绪”日志将始终在“控制器初始化”日志之前写入控制台，并且不存在竞争条件。

请注意，您不能使用ionicApp模块的运行块来引导应用程序，因为在angular引导应用程序之后会调用运行块。因此，如果您没有自动引导它，它将永远不会被调用。

如何在控制器之前加载.run

1 个答案: