AngularJS + Phonegap等待在控制器中觸發deviceReady（）事件

我正在開發移動應用程序（Ionic，Angular，Phonegap），但Phonegap + AngularJS有問題。AngularJS + Phonegap等待在控制器中觸發deviceReady（）事件

我有這個在我的index.html：

<body ng-app="myApplication" ng-controller="MainCtrl"> 
    <ion-nav-view></ion-nav-view> 
</body>

所以我有一個名爲home.html模板包含頁眉，頁腳和也與<ion-nav-view>處理，並用模板變化的內容。例如，home/something.html中的此內容具有單獨的控制器somethingCtrl。

問題：我把document.addEventListener放在我的MainCtrl這是主要的所有意見。而且據我所知，只有在deviceReady被觸發後我才能使用Phonegap API。

我MainCtrl代碼：

我控制器

.controller('MainCtrl', function ($scope, $window, $rootScope, $location) { 
    document.addEventListener("deviceready", onDeviceReady, false); 

    alert('mainCtrl is loaded'); 

    function onOnline(){ 
       $rootScope.online = true; 
      } 
    function onOffline(){ 
       $rootScope.online = false; 
      } 

    function onDeviceReady() { 
     alert('device is ready'); 
     document.addEventListener("online", onOnline, false); 
     document.addEventListener("offline", onOffline, false); 
     getLocalBooksStorageUrl(); 
     } 
    function getLocalBooksStorageUrl(){ 
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess,    null); 
      function fileSystemSuccess(fileSystem) { 
       var fp = fileSystem.root.toURL() + "/myApp"; // Returns Fulpath of local directory with my files 
       $rootScope.localStorage = fp; 
      } 
     } 
})

代碼中，我想訪問$rootScope.localStorage（連接到該控制器的觀點是先在我的應用程序）：

.controller('MybooksCtrl', function ($scope, $rootScope) { 
    alert('myBooks is loaded'); 
    console.log($rootScope.localStorage); // undefined 
})

所以我必須：

alert - mainCtrl is loaded 
alert - myBooks is loaded 
console.log - undefined ($rootScope.localStorage) 
alert - device is ready

我該怎麼做或實施強制第二個控制器的代碼運行只有在設備準備就緒後？

來源

2014-06-14 user3740672

您可以使用$apply在角上下文外執行代碼，然後觸發摘要循環來更新視圖。在調用onDeviceReady()函數之後，將範圍變量'deviceReady'設置爲true。

.controller('MainCtrl', function ($scope, $window, $rootScope, $location) { 
    $scope.deviceReady = false; 
    document.addEventListener("deviceready", onDeviceReady, false); 

    alert('mainCtrl is loaded'); 

    function onOnline(){ 
       $rootScope.online = true; 
      } 
    function onOffline(){ 
       $rootScope.online = false; 
      } 

    function onDeviceReady() { 
     $scope.$apply(function() { 
      alert('device is ready'); 
      document.addEventListener("online", onOnline, false); 
      document.addEventListener("offline", onOffline, false); 
      getLocalBooksStorageUrl(); 
      $scope.deviceReady = true; 
     }); 
    } 
    function getLocalBooksStorageUrl(){ 
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess,    null); 
      function fileSystemSuccess(fileSystem) { 
       var fp = fileSystem.root.toURL() + "/myApp"; // Returns Fulpath of local directory with my files 
       $rootScope.localStorage = fp; 
      } 
     } 
})

然後在你的 'MybooksCtrl'，$監視更改到deviceReady：

.controller('MybooksCtrl', function ($scope, $rootScope) { 
    $scope.$watch('deviceReady', function(newVal) { 
     if (newVal) { 
      alert('myBooks is loaded'); 
      console.log($rootScope.localStorage); // no longer undefined 
     } 
    }); 
})

來源

2014-06-14 17:05:55 pixelbits

謝謝！這真的很有幫助 – Apostolos

AngularJS + Phonegap等待在控制器中觸發deviceReady（）事件

回答

相關問題