尝试将 Phonegap Connection API 与 AngularJS 集成

Question

我正在尝试在我的 Angular/Ionic 项目中使用 PhoneGap Connection API。我想要的是检查用户的网络，如果它是 NONE 我想显示一个特定的 div 如果它不是 NONE，则显示另一个div 通过使用 ng-show 指令。

到目前为止，这是我的代码：

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>

我是 Angular 和 PhoneGap 的新手，所以这个问题可能很容易解决，但我就是想不通:( 非常感谢任何帮助，谢谢！

Answer 1

试试这个：

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

Answer 2

好的，我找到了解决方案！ 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

尝试将 Phonegap Connection API 与 AngularJS 集成

Trying to integrate Phonegap Connection API with AngularJS

angularjs

cordova

ionic