Ionic: проблема с использованием ngCordova для проверки онлайн/оффлайн статуса

Я использую плагин ngCordova «Сетевая информация», чтобы получить онлайн/оффлайн статус хост-устройства. Я следовал этому учебнику (который превосходен, как и другие его сообщения):

Джош Морони - Мониторинг онлайн- и офлайн-состояний в Ионное приложение

Я реализовал службу «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]

Я воссоздал эту проблему в ионном стартовом приложении. Есть два шаблона: Home.html и Workshere.html с соответствующими контроллерами. Онлайн-статус корректно отображается в состоянии «Workshere» и некорректен в состоянии «Home». Кроме того, добавление HomeController в Home.html (через ng-controller), кажется, убивает всю интерактивность на этой странице, даже не может щелкнуть ссылку «Перейти к Workshere».

Home.html и исходное состояние — это состояние по умолчанию для 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() {


    }

  }
})();

Рабочая страница.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>

работа здесь.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);
           }
        }
    };

    }

  }
)();

См. комментарии рядом с маркером "ОБНОВЛЕНИЕ 1".