Ionic：使用 ngCordova 检查在线/离线状态时遇到问题

Question

我正在使用 ngCordova“网络信息”插件来获取主机设备的在线/离线状态。我遵循了本教程（非常好，他的其他帖子也是如此）：

Josh Morony - Monitoring Online and Offline States in an Ionic Application

我已经按照文章中的描述实现了“ConnectivityMonitor”服务。

在我的一个控制器/模板中，它可以完美运行：

(function() {
'use strict';

angular
    .module('myApp')
    .controller('ResearchController', ResearchController);

ResearchController.$inject = ['$scope', '$stateParams', 'MyApi', 'ConnectivityMonitor'];

 function ResearchController($scope, $stateParams, MyApi, ConnectivityMonitor) {
var vm = this;

vm.isOnline = ConnectivityMonitor.isOnline();

...
}



<ion-view title="RESEARCH" ng-controller="ResearchController as vm" >  
  <ion-content>

       <div>
        ONLINE: {{vm.isOnline}}
       </div>

 </ion-content>
</ion-view>

结果：

在线：是的

但是，在另一个控制器/模板中，这不起作用工作，我已经在这个工作了好几个小时：

        (function() {
          'use strict';

          angular
            .module('MyApp')
            .controller('HomeController', HomeController);

          HomeController.$inject = ['$scope','ConnectivityMonitor'];

          function HomeController($scope, ConnectivityMonitor) {

            var vm = this;

            vm.isOnline = ConnectivityMonitor.isOnline();


            activate();


            ////////////////

            function activate() {


            }

          }
        })();




    <ion-content class="background" ng-controller="HomeController as vm">

      <p>ONLINE: {{vm.isOnline}}</p>

    </ion-content>

结果：

在线：{{vm.isOnline}}

这里 ^^^ 似乎 angular 没有执行数据绑定。我在 index.html 中有我所有的相关控制器，以及 angularjs 参考。

这是我对“ConnectivityMonitor”服务的实现：

    (function() {
        'use strict';

        // http://www.joshmorony.com/monitoring-online-and-offline-states-in-an-ionic-application/
        angular.module('MyApp').factory('ConnectivityMonitor', ['$rootScope', '$cordovaNetwork', connectivityMonitor]);

        function connectivityMonitor($rootScope, $cordovaNetwork) {

          return {
            isOnline: function () {
              if (ionic.Platform.isWebView()) {
                return $cordovaNetwork.isOnline();
              } else {
                return navigator.onLine;
              }
            },

            isOffline: function () {
              if (ionic.Platform.isWebView()) {
                return !$cordovaNetwork.isOnline();
              } else {
                return !navigator.onLine;
              }
            }
          };

        }

      }
    )();

知道为什么这不起作用吗？我是 AngularJS 和 Ionic 的新手，所以我认为我忽略了一些细微差别或约定。谢谢。

[更新 1]

我在 ionic starter 应用中重新创建了这个问题。有两个模板：Home.html 和 Workshere.html，带有各自的控制器。在线状态在“Workshere”状态下显示正确，在“Home”状态下显示不正确。此外，将 HomeController 添加到 Home.html（通过 ng-controller）似乎会杀死该页面上的所有交互性，甚至无法单击“Go to Workshere”链接。

Home.html 和 home 状态是 MyApp 的默认状态。我开始认为这是一个时间问题，当主状态加载时 ConnectivityMonitor 尚未准备好。

代码如下：

主页.html

<ion-view>
  <ion-content ng-controller="HomeController">

    <br/><br/><br/>

    <p>HOME</p>

    <p>ONLINE: {{vm}}</p>

    <br/><br/>
    <a ui-sref="workshere">Go to WorksHere</a>
  </ion-content>
</ion-view>

home.controller.js

(function() {
  'use strict';

  angular
    .module('myApp')
    .controller('HomeController', HomeController);

  HomeController.$inject = ['$scope','ConnectivityMonitor'];

  function HomeController($scope, ConnectivityMonitor) {

    $scope.vm = ConnectivityMonitor.isOnline();


    activate();


    ////////////////

    function activate() {


    }

  }
})();

Workshere.html

<ion-view ng-controller="WorkshereController as vm" >

  <ion-content>

    <br/><br/><br/>

    <p>WORKS HERE</p>

    <p>ONLINE: {{vm.isOnline}}</p>

    <br/><br/>
    <a ui-sref="home">Go to Home</a>

  </ion-content>
</ion-view>

workshere.controller.js

(function() {
  'use strict';

  angular
    .module('myApp')
    .controller('WorkshereController', WorkshereController);

  WorkshereController.$inject = ['$scope', 'ConnectivityMonitor'];
  function WorkshereController($scope, ConnectivityMonitor) {
    var vm = this;

    vm.isOnline = ConnectivityMonitor.isOnline();

    activate();


    ////////////////

    function activate() {

    }

  }
})();

app.js

angular.module('myApp', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'home.html'
      })
      .state('workshere', {
        url: 'workshere',
        templateUrl: 'workshere.html'
      });

    $urlRouterProvider.otherwise('/');

  });

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

    <script src="js/connectivityMonitor.js"></script>
    <script src="js/home.controller.js"></script>
    <script src="js/workshere.controller.js"></script>

  </head>
  <body ng-app="myApp">

    <ion-nav-view>
    </ion-nav-view>

  </body>
</html>

ConnectivityMonitor.js

(function() {
    'use strict';

    // http://www.joshmorony.com/monitoring-online-and-offline-states-in-an-ionic-application/
    angular.module('myApp').factory('ConnectivityMonitor', ['$rootScope', '$cordovaNetwork', connectivityMonitor]);

    function connectivityMonitor($rootScope, $cordovaNetwork) {

      return {
        isOnline: function () {
          if (ionic.Platform.isWebView()) {
            return $cordovaNetwork.isOnline();
          } else {
            return navigator.onLine;
          }
        },

        isOffline: function () {
          if (ionic.Platform.isWebView()) {
            return !$cordovaNetwork.isOnline();
          } else {
            return !navigator.onLine;
          }
        },
        startWatching: function(){
           if(ionic.Platform.isWebView()){

             $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
             console.log("went online");
             });

             $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
             console.log("went offline");
             });

           }
           else {

             window.addEventListener("online", function(e) {
             console.log("went online");
             }, false);

             window.addEventListener("offline", function(e) {
             console.log("went offline");
             }, false);
           }
        }
    };

    }

  }
)();

请在“UPDATE 1”标记处查看 cmets。

Answer 1

你为什么不这样尝试：

function HomeController($scope, ConnectivityMonitor) {

        $scope.vm = ConnectivityMonitor.isOnline();
}

为了查看

<ion-content class="background">

  <p>ONLINE: {{vm}}</p>

</ion-content>