web-dev-qa-db-fra.com

Comment deviceready de manière correcte dans l'application ionique?

J'ai une application mobile basée sur Cordova et Ionic. Sur la page par défaut qui est chargée après le démarrage de l'application est nécessaire de travailler avec le plugin SQLLite.

https://github.com/brodysoft/Cordova-SQLitePlugin

Le problème est que la vue contient

ng-init="setData()"

Qui appelle la méthode du contrôleur où est travaillé avec le plugin SQL Lite. Et à cause de la méthode est appelée avant que l'événement deviceready ne soit initialisé (le plugin ne peut être initialisé qu'après un événement deviceready).

J'ai donc essayé cette solution de contournement:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      db = window.sqlitePlugin.openDatabase({name:"callplanner"});
    }

Mais ça ne marche pas pour moi.

Alors j'ai essayé la deuxième solution:

.factory('cordova', function () {
  return {
      test: function(){
          document.addEventListener("deviceready", this.ready, false);
      },
      ready: function(){
            alert("Ready");
            db = window.sqlitePlugin.openDatabase({name:"callplanner"});
      }

  }
})

et dans le contrôleur init i j'ai essayé:

cordova.test();

Mais cela ne fonctionne pas (devicereadfy est déclenché après ng-init).

Après cela, j'ai trouvé cet article:

http://Java.dzone.com/articles/ionic-and-cordovas-deviceready

Mais je ne comprenais pas comment mettre "écran de démarrage" avant que l'application soit prête et comment définir le délai d'attente.

Avez-vous une idée de comment puis-je résoudre ce problème?

Merci beaucoup pour tout conseil ou aide.

javascriptandroidangularjscordovaionic-framework
9
redrom

Vous devez inverser cela, vous devez d’abord gérer l’événement "deviceready" de Cordova puis lancer l’application angularjs. Comme ça:

  1. Tout d'abord, supprimez l'attribut ng-app de la balise html/body

  2. Démarrez l'application angulaire après le téléchargement:

    <script>
  document.addEventListener('deviceready', function() { 
    angular.bootstrap(document, ['YourAppName']);
  }, false);
  var YourAppName = angular.module('YourAppName', []);
</script>

Questions similaires:

15
T4deu

Je ne pouvais pas le faire fonctionner avec la solution @ t4deu, parce que mon tag ng-app était dans le corps, alors je laisse un peu de changement au cas où cela aiderait quelqu'un.

  <script>
    document.addEventListener('deviceready', function() {
      angular.bootstrap(document.querySelector('body'), ['starter']);
    }, false);

  </script>
3
Del