Question

170

Where do I put event listener code in AngularJS that all controller use?

rated 0 times [ 172] [ 2] / answers: 1 / hits: 19194 / 11 Years ago, thu, january 30, 2014, 12:00:00

I want to have some event listener code in my AngularJS app which will apply to the scope of all controllers.

I basically want to define the following somewhere:

    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 controller scope is currently active.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maya

Add To Favorites

Follow

Total Points: 418

Total Questions: 116

Total Answers: 112

Location: Mauritania

Member since Sun, Oct 17, 2021

3 Years ago

maya questions

1 Setting React component props in a Styled Component

Sun, Jul 4, 21, 00:00, 3 Years ago

1 Dotenv unable to overwrite key value pair

Tue, Dec 22, 20, 00:00, 4 Years ago

1 Tracking with the new Google Analytics 4 (GA4) server-side

Fri, Nov 6, 20, 00:00, 4 Years ago

1 Discord.js - How do you log role changes?

Wed, Jul 29, 20, 00:00, 4 Years ago

1 How to change background color of button using react

Tue, Apr 21, 20, 00:00, 4 Years ago

View All

answered 11 Years ago juliettec · Accepted Answer

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;

        });

    }

});

Due to scope inheritance, $rootScope's properties will be inherited by all your child scopes. Be aware that this event occurs outside angular, the use of $apply is also necessary in this case. All your child scopes can $watch noNetwork changes. Like this:

$scope.$watch('noNetwork',function(newValue){

//Handle your tasks here.

});

Another option is creating a service to hold the noNetwork property and inject that service into your controllers.