Broadcasting functions through a service trigger the function multiple times instead of one

Question

I created a service that shares a confirm modal method, and allow to broadcast methods between controillers.

services.SharedService = function($rootScope, $modal) {

 var sharedService = {
    controller : '',
    method : '',
    args : []
 };

 sharedService.prepare = function(controller, method){
    this.controller = controller;
    this.method = method;
    this.broadCast();
 };

 sharedService.broadCast = function(){
    $rootScope.$broadcast('menuBroadcast');
 };



 return sharedService;

});

Then I have three controllers :

controllers.ctrl1 = function($scope, $rootScope, SharedService) {


 $rootScope.$on('menuBroadcast', function() {      
    if (SharedService.controller == 'ctrl1') {
        $scope[SharedService.method]();
    }
 });
 $scope.delete = function(){
  var c = window.confirm("Are you sure you want to delete it?");
    if(c === true){
       //delete
    }
  };
};

and

controllers.ctrl2 = function($scope, $rootScope, SharedService) {

 $rootScope.$on('menuBroadcast', function() {      
    if (SharedService.controller == 'ctrl1') {
        $scope[SharedService.method]();
    }
 });

  $scope.delete = function(){
    var c = window.confirm("Are you sure you want to delete it?");
     if(c === true){
       //delete
     }
    };
  };
};

controllers.menu = function($scope,  SharedService) {
    $scope.delete1 = function() {
        console.debug("Calling delete 1");
        SharedService.prepare('ctrl1', 'delete');
    };
    $scope.delete2 = function() {
        console.debug("Calling delete 2");
        SharedService.prepare('ctrl2', 'delete');
    };
}

The first time I open the confirm from ctrl1, clicking on the ok button works as expected. I can open this modal as many times, it will work.

Then, switching to ctrl2, I open the confirm , I have to click two times on the ok button to be able to close the confirm box.

The console debugs shows that the "calling delete1" and "calling delete2" are triggered only once. But the console.debug from on("menuBroadcast") is triggered sometimes up to 3 times. Any idea why the service triggers the event more than one time? When injected, is it instantiated more than once?

I have been testing it with the window.confirm() and the same behaviour happens. So this issue isn't related to the $modal. — Ant, Dec 02 '13 at 00:34
Investigating more, every time I go the page which uses ctrl1, ctrl1 is re-instantiated. Same for ctrl2. So let's say I visit ctrl1's page 5 times. The $on() will be fired 5 times because 5 instances of the ctrl1 are instantiated. This seems not the expected behaviour to me. Any idea? — Ant, Dec 02 '13 at 00:56

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Duplicate of

How can I unregister a broadcast event to rootscope in AngularJS?

The controller is instantiated more than once . I have to un-register the $rootScope.$on listener on when the $destroy is invoked.

var cleanUpFunc = $rootScope.$on('menuBroadcast', function {
    if (SharedService.controller == 'ctrl1') {
       $scope[SharedService.method]();
    }
});

$scope.$on('$destroy', function() {
    cleanUpFunc();
});

Broadcasting functions through a service trigger the function multiple times instead of one

1 Answers1