Movilizer - 将 MovilizerJS 与 Ionic 一起使用答案

【问题标题】：Movilizer - Using MovilizerJS with IonicMovilizer - 将 MovilizerJS 与 Ionic 一起使用
【发布时间】：2015-05-29 08:49:22
【问题描述】：

我正在尝试将 MovilizerJS 与 Ionic 框架一起使用来创建 HTML5 屏幕。我尝试从 Ionic 生成的 App.js 文件中引用 te MovilizerJS。我在 plugins 文件夹中添加了 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 视图）时，MovilizerJS 没有被加载。浏览器出现如下错误：

模块“movilizer”不可用！

也许我需要将此作为模块添加到 Angular 框架中，但是当我尝试将其添加到模块时，它仍然会给我错误。我的 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 方法。任何帮助或想法将不胜感激。

【问题讨论】：

在访问原型Movilizer的readGlobalVariable函数之前，您是否创建了它的实例movilizer？错误消息听起来好像在运行时上下文中不存在任何实例。为了在浏览器中调试，如果我没记错的话，它应该存在于 Movilizer.js 中
我最近能够通过在我的 HTML 页面中编辑脚本顺序来解决这个问题，cordova.js 需要在我的 Ionic 框架之前加载，否则它不会识别 movilizer.js它还没有被实例化。我确实让 movilizerjs 在我的桌面浏览器（chrome、firefox 甚至 IE）上工作，但不幸的是它似乎仍然无法在 movilizer 客户端中工作。使用 Swing 调试客户端，所有变量似乎都可以，所以我认为这是 HTML5 屏幕中的内部错误。虽然 HTML5 错误没有记录在 swing 调试客户端中，所以我不确定

标签： angularjs html cordova ionic-framework movilizer

【解决方案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;
    });
  });

【讨论】：