手动从科尔多瓦deviceready事件自举AngularJS [英] Manually bootstrapping AngularJS from Cordova deviceready event

问题描述

我用科尔多瓦3.3.1-0.4.2和角度1.2.13

I'm using Cordova 3.3.1-0.4.2 and Angular 1.2.13

我需要手动引导角，一旦我得到的科尔多瓦'deviceready事件。

I need to manually bootstrap Angular once I get the Cordova 'deviceready' event.

我在Nexus 5的测试与科尔多瓦运行的Andr​​oid 但我有完全相同一个iPhone相同的行为。

I'm testing on a Nexus 5 with cordova run android but am having exactly the same behaviour on an iPhone.

为了简化问题，这是JS在全球范围内的文件运行。脚本正在结束＆LT之前加载; / BODY方式＆gt; 标签

To simplify the problem this is JS running in the global document scope. Scripts are being loaded before the closing </body> tag.

本作品：

angular.bootstrap(document.getElementById("app"), ["MyApp"]);

这不工作：

function init(){
  angular.bootstrap(document.getElementById("app"), ["MyApp"]);
}

document.addEventListener('deviceready', function () {
  init();
}, true);

不过，如果我添加警报（INIT）来init方法，显示它正在运行。另外警报（角）和警报（的document.getElementById（应用程序））显示，它们的存在。

However if I add alert("init") to the init method that shows it IS running. Also alert(angular) and alert(document.getElementById("app")) show that they exist.

我不明白为什么，因为的init（）被调用，它不会从事件监听回调调用时工作还没有它的工作，如果直接调用。

I don't understand why, given that init() is being called, it doesn't work when called from the EventListener callback yet it does work if called directly.

似乎不可思议/直观。

有人吗？

推荐答案

我已经找到了最好的解决办法是引导角正常，然后加载科尔多瓦作为一个返回承诺的模块，这是解决时，该设备已准备就绪

The best solution I've found is to bootstrap Angular as normal and then load Cordova as a module that returns a promise, which is resolved when the device is ready.

angular.module('fsCordova', [])
.service('CordovaService', ['$document', '$timeout', '$window',  '$q',
  function($document, $timeout, $window, $q) {

    var defer = $q.defer();

    this.ready = defer.promise;

    // Backup in the case that we did not received the event
    // This seemed to be necessary with some versions of Cordova
    // when testing via 'cordova serve' in a web browser
    // but when on-device the event is received correctly
    var timoutPromise = $timeout(function() {
      if ($window.cordova){
        defer.resolve($window.cordova);
      } else {
        defer.reject("Cordova failed to load");
      }     
    }, 1200);

    angular.element($document)[0].addEventListener('deviceready', function() {
      $timeout.cancel(timoutPromise);
      defer.resolve($window.cordova);
    });  
  }
]);

用法：

angular.module('app', ['fsCordova']).

run(['$window', function($window){
  // init Fastclick
  FastClick.attach(angular.element($window.document.body)[0]);
}]).

controller('AppCtrl', ['$scope', 'CordovaService', 
  function($scope, CordovaService){

    $scope.ready = false;

    // when cordova is ready
    CordovaService.ready.then(
      function resolved(resp) {
         $scope.ready = true;  
      },
      function rejected(resp){
        throw new Error(resp);
      }
    );
  }
]);

我分享了该项目的引导这里GitHub上

这篇关于手动从科尔多瓦deviceready事件自举AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！