CODEWITHSUNDEEP
javascriptangularjs
milanis
milanis

Reputation: 55

Angularjs: catching an event from multiple controller

I have two controller where both of them are listening to a same event. The event is sent from custom directive. Custom directive is reused in 2 other templates which belong to the controllers. And those 2 controllers are doing different actions when they catch the event. One is deleting the item from database, the other is simply deleting the item from collection on the view.

The controllers are called based on route. They are called from different route.

Now the problem is they both are catching the event at the same time. Is there any way to make them catch the event based on the route?

Or can you give me any explanation why the both controllers are being active even though supposedly only one should be being called based on the route?

angular.module('item.module')
    .directive('item', function($rootScope) {
        restrict: 'E',
        template: '<button ng-click="removeItem()"></button>'
        controller: function(){
            $scope.removeItem = function() {
                $rootScope.$emit('deleteThisItem', {item: $scope.item});
            };                  
        }
     };
);

function firstCtrl($scope, $rootScope)
{
    $rootScope.$on('deleteThisItem', function(event, data){
        //deletes the item from list from view
    });
}

function secondCtrl($scope, $rootScope)
{
    $rootScope.$on('deleteThisItem', function(event, data){
        //deletes the item from database
    });
}

Upvotes: 0

Views: 1437

Answers (1)

milanis
milanis

Reputation: 55

Since I couldn't find any better solution yet, I've come up the solution to check the location path before proceeding with the event. So in each controller after it catches the event, it checks if the current path is matching with the controller's path and if it is the case, it proceeds with deleting the item according to its logic.

It is not very optimal solution, but it is working so far. I hope it may help someone who faces same situation.

//firstcontroller.js
$rootScope.$on('deleteThisItem', function(event, data){
    if(!$location.path().startsWith('/first')) {
       //if the route is not on the first controller's path
       return;
    }
    //deletes the item from list from view
});

//secondcontroller.js
$rootScope.$on('deleteThisItem', function(event, data){
    if(!$location.path().startsWith('/second')) {
       //if the route is not on the second controller's path
       return;
    }
    //deletes the item from database
});

Upvotes: 1

Related Questions