it-swarm.com.ru

Как правильно настроить устройство в Ionic приложении?

У меня есть мобильное приложение на основе Cordova и Ionic. На странице по умолчанию, которая загружается после запуска приложения, необходимо работать с плагином SQLLite. 

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

Проблема в том, что представление содержит 

ng-init="setData()"

Который вызывает метод контроллера, где работает с плагином SQL Lite. И поскольку метод вызывается до того, как событие deviceready не инициализируется (плагин может быть инициализирован только после события deviceready).

Итак, я попробовал этот обходной путь: 

.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"});
    }

Но это не работает для меня.

Итак, я попробовал второе решение:

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

  }
})

и в контроллере init я попытался:

cordova.test();

Но это не работает (devicereadfy запускается после ng-init).

После этого я нашел эту статью:

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

Но я не понял, как поставить «заставку» до того, как приложение будет готово и как установить тайм-аут.

У кого-нибудь есть идеи, как я могу решить эту проблему?

Большое спасибо за любой совет или помощь.

9
redrom

Вам нужно это инвертировать, сначала вы обрабатываете событие «deviceready» cordova, а затем запускаете приложение angularjs. Как это:

  1. Сначала удалите атрибут ng-app из тега html/body

  2. Запустите угловое приложение после devireready:

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

Похожие вопросы:

15
T4deu

Я не мог заставить его работать с решением @ t4deu, потому что мой тег ng-app был в теле, поэтому я оставляю небольшое изменение на случай, если оно кому-нибудь поможет.

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

  </script>
3
Del