我正在尝试将MovilizerJS与Ionic Framework结合使用以创建HTML5屏幕。我尝试从Ionic生成的App.js文件中引用te MovilizerJS。我在插件文件夹中添加了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页面(或在Movelet中加载html5 View )时,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文件包含app.js代码中描述的readGlobalVariable方法。任何帮助或想法,将不胜感激。
最佳答案
尝试引导您的应用程序,而不要使用ng-app
:
window.onpageshow = ready;
function ready()
{
var deviceready = new Event("deviceready");
document.dispatchEvent(deviceready);
angular.bootstrap(document, ['starter'], {strictDi: true});
}
另外,使用Promise等待
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;
});
});