$emit is called more than once angularJS

Question

Ok this code is calling my $emit function more than once. I want it to just call it once.

I have a controller, and two directives. To sum it up, I want to have one directive send a message to the controller and the controller send a message to the other directive. Need help.

From the newby angularJS coder.

enter code here

app.controller("myCtrl", ['$scope', '$http', '$routeParams', 'myCounter', '$rootScope', function ($scope, $http, $routeParams, myCounter, $rootScope) {

///////////////////////////////////////////
Listener = $scope.$on('eventEmit', function (event, args) {

    event.stopPropagation();
    console.log("hi from controller");

    // broadcast down to directives
    childPosition = 0;
    $scope.$broadcast('eventBroadcast', childPosition);

});

// destroy listener
$scope.$on('$destroy', Listener);

}]);

“Page” directive Only 1 “page” can be visible at a time. A page cannot exist inside of another page Which page is visible will be determined by commands to the controller

enter code here
app.directive('myPage', function (myCounter) {
return {
    template: '<div  ng-show = "showContent" >content {{counter}}</div>',
    restrict: 'EA',
    controller: 'myCtrl',
    scope: {
        nextPage: '&',
        showContent:'<'

    },

    link: function (scope, element, attr) {

        ///////////////////////////////////////////
        scope.$on('eventBroadcast', function (event, args) {

            console.log("hi from directive");

        });
    }

};


})

“Event” Directive Will listen to the events on its parent element, and send commands via when the event it's listening for happens. 2 attributes Type – What event should be listened for (like “click”) Action – What should happen when the event happens? the event directive for example should send a message to tell the controller to call the NextPage function

enter code here
app.directive('myEvent',['$rootScope', function (myCounter,$rootScope ) {
return {
    restrict: 'EA',
    controller: 'myCtrl',

    template: '<input type = "button" ng-click = "handlePrev()" ng-
    transclude>Prev</input>' +
      '<input type = "button" ng-click = "handleNext()" ng-
    transclude>Next</input>',
    transclude:true,
    link: function ($scope, element, attrs) {


        $scope.handleNext = function () {

            $scope.functionValue = "nextPage";
            pageController($scope.functionValue, $scope);
           console.log("Clicked next", $scope.functionValue);


        }
        $scope.handlePrev = function () {

            $scope.functionValue = "prevPage";

            pageController($scope.functionValue, $scope);

        }

    }



};
}])


pageController = function ( string, $scope) {


myEmitter = $scope.$emit('eventEmit', string);
$scope.$emit('$destroy', myEmitter);
}

Answer 1

There are three solutions to this problem:

1. Ensure that emit is only called once (may not be possible).

2. Look at the 2 events that are fired. Are they the same event? For example, are they both click events or is one a click event and one a different event. If you are only interested in the click event then do something like ..

    if (event.target.type === 'click') { // run your code here } 

3. If all else fails, you can debounce or throttle the event that will mean it cannot be called twice in a given timeframe. For example, it will ensure that it cannot be called twice within 300ms. The second call will be ignored. If you want to use this approach then use Lodash debounce or Lodash throttle .