Movilizer - Utilizzo di MovilizerJS con Ionic

Question

Sto cercando di utilizzare MovilizerJS con Ionic Framework per creare uno schermo HTML5. Provo a fare riferimento a MovilizerJS dai file App.js generati da Ionic. Ho aggiunto i file MovilizerJS nella cartella plugins e aggiunto il file Cordova.js che contiene.

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

Sembra però che quando carico della pagina HTML5 all'interno di un browser (o vista HTML5 nel movelet) il MovilizerJS non viene caricato. Sul browser viene visualizzato il seguente errore:

Il modulo "movilizer" non è disponibile!

Forse ho bisogno di aggiungere questo come un modulo al quadro angolare, ma quando provo ad aggiungerlo ai moduli mi dà ancora errori. miei file HTML contiene lo script-tag per movilizer:

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

Il mio codice App.js attualmente appare così:

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

quando chiamo direttamente il metodo succesCallback e commentare la linea: movilizer. readGlobalVariable (...), non tenta più di accedere a movilizerJS e la pagina funziona. Inoltre, il file Movilizer.js contiene il metodo readGlobalVariable descritto nel codice app.js. Qualsiasi aiuto o idea sarebbe apprezzato.

Answer 1

Cercate di bootstrap la vostra applicazione, invece di utilizzare ng-app:

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

Inoltre, utilizzare una promessa di aspettare per 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; 
    }); 
    });