ngDialog closed event fires multiple times (AngularJS)

Question

The issue we are having is when we listen for the event 'ngDialog.closed', we found that it is firing multiple times. We are only opening the dialog once, so we assume that closing the same modal, this event should only fire once as well. There are multiple modals across the application, and we listen for this specific modal by attaching it to $rootScope, like so:

         $rootScope.$on('ngDialog.closed', function (e, $dialog) {
          console.log("CLOSED TEHE MODAL", $dialog);
          console.log("EVENT", e);
          if($rootScope.modalFinished && localStorage.getItem("tourComplete") !== "true"){
              $rootScope.modalFinished = false;
              console.log("THIS IS LOCAL STORE:", localStorage.getItem("tourComplete"));
                    $scope.CallMe();
          }
      });

The reason we are listening via $rootScope is to pass this "closed" event from one controller(the modal) to another controller(home screen) that has already been loaded before the modal controller.

We have noticed that on the 'ngDialog.closed' event, multiple events are being fired (usually up to 2 to 3 times per closing of a modal).

Here is where we open the ngDialog (in the login controller):

                      $state.go('app.dashboard')
                      if(AclService.can('edit')|| AclService.can('admin')){

                        $scope.$on('$stateChangeSuccess', function onStateSuccess(event, toState, toParams, fromState){

                          $rootScope.modalFinished = true;
                          CauseService.get().then(function(result){
                            var cause = result[0].attributes;

                            if(!cause.has_backlinked || !cause.has_verified_address){
                              // $rootScope.modalFinished = true;
                              ngDialog.open({
                                template: '../../app/views/dashboard/progress_modal.html',
                                showClose: false,
                                className: 'ngdialog-theme-default progressModal',
                                controller: 'ProgressModalController',
                                resolve:{
                                  'Cause': ['CauseService', function(CauseService){
                                    // console.log("CauseService in routes", CauseService.get());
                                    return CauseService.get();
                                  }]
                                }
                              });
                            }
                          });
                        });
                      }

Any help would be greatly appreciated.

Thanks so much.

-M-

score 1 · Accepted Answer · answered May 25 '16 at 00:03

Alright so after lots of trial and error, I concluded that due to attaching the 'ngDialog.close' event to $rootScope AND the controller we are listening on has already loaded before the modal's controller has loaded, each controller will log the event of the modal being closed.

To remedy this problem, I attached the 'ngDialog.close' event to $scope like so:

      $scope.$on('ngDialog.closed', function (e, $dialog) {
        if($rootScope.modalFinished && localStorage.getItem("tourComplete") !== "true"){
            $rootScope.modalFinished = false;
            console.log("THIS IS LOCAL STORE:", localStorage.getItem("tourComplete"));
            console.log("****************NGDIALOG IS CALLED")
            $scope.CallMe();
        }
      });

And now the desired behavior of only one 'ngDialog.close' event is fired within the dashboard controller. This solution also solves the problem of this listener being fired on other modals within other $states or controllers.

Hope this answer can help someone out and would appreciate any feedback!!!!

-M-

score 0 · Answer 2 · answered May 06 '21 at 20:23

//In nebular (angular 4+) 
// Closed event identify by below code in nebular lib in Angular 4+


 this.dialogService.open(UpdateUseItemComponent, {
      hasBackdrop:true ,
      closeOnEsc:true,
      autoFocus:true,
      context: {
        data: event
      }
    }).onClose.subscribe(result => {
          this.getStock();
    });

ngDialog closed event fires multiple times (AngularJS)

2 Answers2