Movilizer - Использование MovilizerJS с Ionic

Question

Я пытаюсь использовать MovilizerJS с Ionic Framework для создания экрана HTML5. Я пытаюсь ссылаться на MovilizerJS из файлов App.js, сгенерированных Ionic. Я добавил файлы MovilizerJS в папку плагинов и добавил файл Cordova.js, содержащий.

var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = "plugins/Movilizer.js";
oHead.appendChild(oScript);

Кажется, однако, что когда я загружаю страницу HTML5 внутри браузера (или html5-представление в мовлете), MovilizerJS не загружается. В браузере появляется следующая ошибка:

Модуль "Мовилизатор" недоступен!

Возможно, мне нужно добавить это как модуль в Angular Framework, но когда я пытаюсь добавить его в модули, он все равно дает мне ошибки. Мои HTML-файлы содержат скрипт-тег для movilizer:

<script src="plugins/Movilizer.js"></script>

Мой код App.js в настоящее время выглядит так:

angular.module('starter', ['ionic'])
.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);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }

      });
    }).factory('MovilizerExtender', function ($rootScope) {
      return {
        startUpMovilizer: function(){
          movilizer.readGlobalVariable("testTable",this.successCallback,this.errorCallback);
        },
        successCallback: function(result){
          $rootScope.routestops = [
            { ontvNaam: 'nice' },
            { ontvNaam: 'it' },
            { ontvNaam: 'is' },
            { ontvNaam: 'working' }
          ];
       },
       errorCallback: function(){
          console.log('failed');
       }
      }
    }).controller("RoutestopCtrl", function($scope, $rootScope, MovilizerExtender) {
      MovilizerExtender.startUpMovilizer();
      $scope.routestops = $rootScope.routestops;

      $rootScope.$watch('routestops', function(){
          $scope.routestops = $rootScope.routestops;
      });
    });

Когда я напрямую вызываю метод succesCallback и комментирую строку: movilizer.readGlobalVariable (...), он больше не пытается получить доступ к movilizerJS, и страница работает. Также обратите внимание, что файл Movilizer.js содержит метод readGlobalVariable, описанный в коде app.js. Любая помощь или идеи будут оценены.

Answer 1

Попытайтесь загрузить свое приложение вместо использования ng-app:

window.onpageshow = ready;
function ready()
{
    var deviceready = new Event("deviceready");
    document.dispatchEvent(deviceready);   
    angular.bootstrap(document, ['starter'], {strictDi: true});  
}

Кроме того, используйте обещание ждать movilizer:

 .factory('MovilizerExtender', function ($q, $rootScope) {
    return {
      startUpMovilizer: function(){
        var self = this;
        var defer = $q.defer();

        rootScope.$watch(function(value) {
          return movilizer && movilizer.readGlobalVariable;
        }, function(ready) {
          if(ready) {
            movilizer.readGlobalVariable("testTable",self.successCallback,self.errorCallback);
          }
          defer.resolve(ready);
        });
        return defer.promise;
      },
      successCallback: function(result){
        $rootScope.routestops = [
          { ontvNaam: 'nice' },
          { ontvNaam: 'it' },
          { ontvNaam: 'is' },
          { ontvNaam: 'working' }
        ];
      },
      errorCallback: function(){
        console.log('failed');
      }
    }
  }).controller("RoutestopCtrl", function($scope, $rootScope, MovilizerExtender) {
    MovilizerExtender.startUpMovilizer().then(function(){
      $scope.routestops = $rootScope.routestops;
    });
    $rootScope.$watch('routestops', function(){
      $scope.routestops = $rootScope.routestops;
    });
  });