Where can I put event listener code in AngularJS that uses the entire controller?

Question

I want to have some kind of event listener code in my AngularJS application that will apply to the scope of all controllers.

Basically I want to define the following:

    document.addEventListener("online", onOnline, false);
    document.addEventListener("offline", onOffline, false);

    function onOnline() {
        console.log("just got online event");
        $scope.noNetwork = false;
    }

    function onOffline() {
        console.log("just got offline event");
        $scope.noNetwork = true;
    }

which will receive events no matter which area of ​​the controller is active.

Answer 1

Try $rootScope:

var app = angular.module("yourModule",[]);
app.run(function($rootScope){
   document.addEventListener("online", onOnline, false);
   document.addEventListener("offline", onOffline, false);

   function onOnline() {
        $rootScope.$apply(function(){
            console.log("just got online event");
            $rootScope.noNetwork = false;
        });
    }

    function onOffline() {
        $rootScope.$apply(function(){
             console.log("just got offline event");
             $rootScope.noNetwork = true;
        });
    }
});

- , $rootScope . , angular, $apply . $ noNetwork. :

$scope.$watch('noNetwork',function(newValue){
//Handle your tasks here.
});

- noNetwork .

Answer 2

, $scope.noNetwork

Answer 3

@KhanhTo Another option:

;(function initModule(module) {

  module.provider('IsOnlineService', Provider);
  function Provider() {
    var eventNames = {
      online: 'online', 
      offline: 'offline'
    };
    this.setOnlineEventName = function(name) {eventNames.online = name;}
    this.setOfflineEventName = function(name) {eventNames.offline = name;}
    this.$get = OnlineService;

    OnlineService.$inject = ['$document', '$rootScope'];
    function OnlineService($document, $rootScope) {
      // Listen events
      $document.addEventListener(eventNames.online, setState.bind(this, true), false);
      $document.addEventListener(eventNames.offline, setState.bind(this, false), false);

      // Observer pattern: everybody can receive updates
      var subscribers = {};
      this.subscribe = subscribe;
      this.unsubscribe = unsubscribe;

      var state = false;
      this.getState = getState;

      return this;

      // Implementation
      function subscribe(id, sub) {subscribers[id] = sub;}
      function unsubscribe(id) {delete subscribers[id];}
      function announceAll(value) {
        Object.keys(subscribers, function(id){
          subscribers[id](value);
        });
      }

      function getState() {return state;}
      function setState(value) {
        state = value;
        $rootScope.$apply(announceAll.bind(null, state));
      }
    }
  }

})(angular.module('yourModule', [
]));

:

angular.module('app')
.config(['IsOnlineServiceProvider', function(online){
  online.setOfflineEventName('away');
}]);

:

angular.module('app')
.controller('SomeCtrlr', ['IsOnlineService', function(online){
  // Direct way:
  this.online = online.getState();
  this.isOnline = online.getState;
  // SubPub: 
  online.subscribe('somectrlr', function(state){
    this.isOnline = state;
    this.onlineStr = state ? 'Online' : 'Offline';
  });
}]);