2015-02-11 54 views
0

我正在嘗試在我的Angular/Ionic項目中使用PhoneGap Connection API。我想要檢查用戶的網絡,如果它不是我想要顯示具體的div,並且如果它不是NONE,請使用ng-show指令顯示另一個div試圖將Phonegap連接API與AngularJS集成

這是到目前爲止我的代碼:

controller.js

.controller('LoginCtrl', function($scope, CheckConnection) { 

    $scope.net = CheckConnection.networkState(); 

}) 

.factory('cordovaReady', function() { 
    return function (fn) { 

     var queue = []; 

     var impl = function() { 
     queue.push(Array.prototype.slice.call(arguments)); 
    }; 

    document.addEventListener('deviceready', function() { 
     queue.forEach(function (args) { 
     fn.apply(this, args); 
    }); 
    impl = fn; 
    }, false); 

    return function() { 
     return impl.apply(this, arguments); 
    }; 
}; 
}) 

.factory('CheckConnection', function(cordovaReady) { 
    return { 
     networkState: cordovaReady(function() { 
      var net = navigator.connection.type; 

      if(net == 'none') { 
       var internet = false; 
      } else { 
       var internet = true; 
      } 

      return internet; 
     }) 
    }; 
}) 

view.html

<ion-nav-view name="login"> 
    <div ng-hide="LoginCtrl.net"> 
     NO CONNECTION {{net}} 
    </div> 
    <div ng-show="LoginCtrl.net"> 
     CONNECTED {{net}} 
    </div> 
</ion-nav-view> 

我與角和PhoneGap的相當新的所以這問題可能很簡單,但我無法弄清楚:(任何幫助將非常感謝,謝謝!

回答

0

好吧,我找到了解決辦法! Angular有它自己的方式來檢查連接,所以我甚至不需要PhoneGap。

這是我的新controller.js

.controller('LoginCtrl', function($window, $scope) { 
    $scope.online = navigator.onLine; 
    $window.addEventListener("offline", function() { 
     $scope.$apply(function() { 
      $scope.online = false; 
     }); 
    }, false); 
    $window.addEventListener("online", function() { 
     $scope.$apply(function() { 
      $scope.online = true; 
     }); 
    }, false); 
}) 

而且view.html

<ion-nav-view name="login"> 
    <div ng-hide="online"> 
     NO CONNECTION 
    </div> 
    <div ng-show="online"> 
     CONNECTED 
    </div> 
</ion-nav-view> 

希望它可以幫助別人:d

0

試試這個:

<ion-nav-view name="login" ng-controller="LoginCtrl"> 
<div ng-hide="net"> 
    NO CONNECTION {{net}} 
</div> 
<div ng-show="net"> 
    CONNECTED {{net}} 
</div> 

+0

我忘了提,我有一個.js來控制我的項目的狀態,在那裏我將LoginCtrl定義爲view.html控制器。所以不需要在html中聲明ng-controller。抱歉 – 2015-02-11 03:41:00