ngDialog opening multiple times

Question

First time when I click on the link to open the dialog, it is opening only one time. But from the second time, it is opening two times, four times , eight times on second, third, fourth click respectively. Why is it opening multiple times?

Html code: header.html

<li><a href data-ng-click="chatBotFunction()" chat-bot>Chat</a></li>

JS code: headerCtrl.js

$scope.chatBotFunction = function() {
    $rootScope.$emit("CallChatMethod",{});
}

chatCtrl.js

$rootScope.$on("CallChatMethod", function(){
    $scope.openChatBox();
});

$scope.openChatBox = function() {
    ngDialog.openConfirm({
        template: 'modules/main/views/chatBot.html',
        controller: 'chatCtrl',
        closeByDocument: false,
        closeByEscape: false,
        showClose: false,
        scope: $scope 
    }).then(

    );  
};

Someone please help me solve this. Thanks in advance.

Answer 1

The problem was, if you use $rootScope.$on the respective controller will not destroy even when you navigate to other pages. So try with $scope.$on

$scope.$on("CallChatMethod", function(){
    $scope.openChatBox();
});

$scope.$broadcast is for when publishing from parent to child
$scope.$emit is for when publishing from child to parent

Let me knw if you still face problem.

Answer 2

You need to remove the listener on scope destroy event

var callChatListener = $rootScope.$on("CallChatMethod", function(){
   $scope.openChatBox();
});

Below code will remove listener from $rootscope

$scope.$on("$destroy", function(){
   callChatListener(); 
});