network-state.directive.js

(function() {
  'use strict';

  /**
  * @desc show network status when offline.
  * @example <network-state message="No conection"></network-state> 
  */
  angular
  .module('NetworkStateDirective', [])
  .directive('networkState', networkState);

  networkState.$inject = [];
  function networkState(){
    var directive = {
      restrict : 'E',
      scope: {
        message : '@'
      },
      template: '<div data-ng-if="isOffline()">{{message}}</div>',
      link: link
    };
    return directive;
    
    function link(scope, element, attrs){
      scope.isOffline = isOffline;

      function isOffline(){
        return !window.navigator.onLine;
      };

      window.addEventListener('online', function () {
        scope.$digest();
      });

      window.addEventListener('offline', function () {
        scope.$digest();
      });

    };
 };
  
})();