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

Posted

技术标签:

【中文标题】如何在控制器之前加载.run【英文标题】:How to load the .run before the controller 【发布时间】:2016-04-17 09:28:58 【问题描述】:

我正在使用预填充的数据库在 Cordova 中做一个应用程序,我试图将 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() 函数。

问候。

【问题讨论】:

这应该已经发生了。您是否复制/粘贴了此代码?因为您的行db = $cordovaSQLite.openDB(mydb.db"); 缺少"。除此之外,这看起来是正确的。 我拼错了,但这里的代码是正确的。 @matthewpavkov window.plugins.sqlDB.copy 是否同步?看起来函数在回调中,这可能意味着它们是异步的。 【参考方案1】:

$ionicPlatform.ready 不是在您的 ionic 应用程序中执行的第一件事。调用$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 模块的 run 块来引导您的应用程序,因为在 angular 引导应用程序之后会调用 run 块。因此,如果您没有自动引导它,它将永远不会被调用。

【讨论】:

你是对的,现在我遇到了 $cordovaSQLite.openDB("mydb.db"); 的问题我不知道为什么它不打开数据库,但谢谢你的帮助真的很有用!

以上是关于如何在控制器之前加载.run的主要内容,如果未能解决你的问题,请参考以下文章

如何在将数据推送到导航堆栈之前将数据传递给视图控制器并加载它?

$q defer 和 promises 以及如何使用它们在视图呈现之前为控制器加载数据

如何在 SWIFT 中推送视图之前加载视图?

AngularJS:如何在页面完全加载之前显示预加载或加载?

如何在加载该页面之前使用 javascript 附加请求的标头

如何在 AngularJS 中“急切加载”服务? (在需要之前自动实例化它)