Angularjs: How to prevent creating multiple event listener on controller refresh

Question

I have a controller like this:

myApp.controller('loginCtrl', ['$scope', '$rootScope', '$http', '$location', function($scope, $rootScope, $http, $location){

    console.log('check 1');

    // before route update
    //---------------------------------------------------------
    $rootScope.$on('$locationChangeStart', function(event){
        if($location.path() == "/login"){
            console.log('check 2');
        }
    });

}]);

First time check 1 will be logged and When i click on /login link, check 2 will be logged. everytime i change path to /home and /login, i expect a new check 2 on console but what i see in console is like this:

check 2 (1 time)
check 2 (2 times)
check 2 (3 times)
check 2 (4 times)
...

this means by every location change, angularjs creates a new listener and number of check 2's increases! Is there a standard way for listening on location change without this issue? or should i remove my listener before leaving /login page?

OTHER FILES

my app.js file:

...
when('/login', {
  templateUrl: 'page/login.html', 
  controller: 'loginCtrl', 
  reloadOnSearch: false
})
...

login template:

<section class="login-page section">
    <h3>Login</h3>
    ...
</section>

Christoph · Accepted Answer · 2014-03-10 11:43:14Z

1

This is because you are subscribing with $rootScope.$on in your controller. When you subscribe this way, AngularJS has no chance to clean up the listeners for you when your local $scope is destroyed.

Just subscribe with $scope.$on('$locationChangeStart', fn); If you subscribe this way AngularJS will automatically remove the listener when your local $scope is destroyed.

answered Mar 10, 2014 at 11:43

Christoph

28.4k33 gold badges104 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

geoidesic Over a year ago

What about if you are subscribing to an event not generated by AngularJS? E.g. Parsley generates events to which one subscribes using $.listen. This will register a listener each time one hits the controller.

Collectives™ on Stack Overflow

Angularjs: How to prevent creating multiple event listener on controller refresh

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related