26

I have an angular service for handling modals:

angular.module('myApp').service('ModalService', function($uibModal) {
  function open(options) {
    return $uibModal.open(options);
  }
});

Now I upgraded to angular 1.6 and got this error:

Possibly unhandled rejection: backdrop click

whenever I open a modal and click somewhere else (the backdrop) and the modal closes (as intended). So I want to handle this unhandled exception in my ModalService as I do not want to handle this case everytime I use the ModalService. It is always ok to close the modal via backdrop click, this is no exception.

I tried:

angular.module('myApp').service('ModalService', function($uibModal) {
  function open(options) {
    var modalInstance = $uibModal.open(options);
    modalInstance.result.catch(function error(error) {
      if(error === "backdrop click") {
        // do nothing
      } else {
        throw error;
      }
    })
    return modalInstance;
  }
});

But this leads to the problem that I cannot handle other errors than backdrop click as they are always thrown:

ModalService.open({...}).result.catch(function(error) {
  // this will catch the error too, but the throw in the ModalService
  // will occure in parallel and will not be catched by this function
});

And if I try it like this:

angular.module('myApp').service('ModalService', function($uibModal) {
  function open(options) {
    var modalInstance = $uibModal.open(options);
    modalInstance.result.then(function(whatever) {
      return whatever;
    }, function rejection(error) {
      return error;
    });
    return modalInstance;
  });
});

it resolves the 'unhandled rejection' error, but for every case not just for 'backdrop clicked'.

Has anybody a good solution for this case?

Andi
  • 1,172
  • 1
  • 11
  • 16

4 Answers4

25

Unfortunately that's how they handle it in The official Plucker for Modal (ui.bootstrap.modal).

If you click on any button it logs something like this:

Modal dismissed at: Thu Feb 23 2017 21:54:26 GMT-0300 (Pacific SA Daylight Time)

What they do is:

modalInstance.result.then(function (selectedItem) {
  $ctrl.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

If you remove the error callback, guess what you get:

Possibly unhandled rejection: backdrop click

And even on cancel

Possibly unhandled rejection: cancel

So far, you either do that or use this workaround to silence unhandled rejections

app.config(['$qProvider', function ($qProvider) {
            $qProvider.errorOnUnhandledRejections(false);
        }]);
Veglos
  • 458
  • 4
  • 8
  • 5
    Mhh, so all I can do is silence the error via configuration or by catching them all and swallow them? This is not satisfying... – Andi Feb 24 '17 at 08:54
  • I agree. But that is how the core behaves. At least (hopefully) until 1.6.2. See https://github.com/angular/angular.js/issues/15599#issuecomment-271982730 – Veglos Feb 24 '17 at 10:23
  • 1
    You should not silence the error, but instead handle the rejected promise with the second argument of `then`. – thibautg Mar 22 '17 at 13:56
11

use this 

 $uibModal.open({
                    ////your code......
}).result.then(function(){}, function(res){})

now it will not give you error

jitendra varshney
  • 3,484
  • 1
  • 21
  • 31
  • "I do not want to handle this case everytime I use the ModalService" – Josh Noe May 07 '17 at 02:27
  • 2
    but it is angularjs problem if you would use app.config(['$qProvider', function ($qProvider) { $qProvider.errorOnUnhandledRejections(false); }]); then many error would not be handled – jitendra varshney May 11 '17 at 13:25
5

UI Specification dependent.

This is NOT the greatest workaround if there are UI specifications that the end-user must be able to click OUTSIDE the modal to close the modal.

If that is NOT the case and there is a little 'x' on the top right of the modal and/or there is a close

backdrop: false, // <<< !!!!!!! (see code below)
will prevent the end-user from clicking OUTSIDE the modal to close the modal. 

$scope.change = function (changeableData, p_Mode) {
    var modalInstance = $uibModal.open({
        templateUrl: whatever,
        controller: ModalInstanceCtrl,
        scope: $scope,
        backdrop: false,  // <<< !!!!!!!
        resolve: {
            // whatever
        }
    });

This will prevent the error "Possibly unhandled rejection: backdrop click" from occurring.

Once again, you need to look at the UI specifications and/or get permission from the analysts to implement this.

gBerger101
  • 51
  • 2
  • 5
  • As I want the user to be able to click the backdrop to close the modal, this is no solution for (as you already pointed out in your introduction). – Andi May 16 '17 at 07:27
  • Thank you this is helpful for me. I have both a close button and a X to close the window so it would be better for my specific case to not allow the user to click on the backdrop. – pengz Jan 07 '18 at 03:44
4

If you're using a controller within your modal. I used this on the closing event. Because 'Closing' is valid but 'Dismissing' is a rejection. This goes within your modal controller, not the parent. 

            $scope.$on('modal.closing', (event, reason, closed) => {
                if (!closed) {
                    event.preventDefault();
                    $scope.$close("Closing");   
                }

            });

So your backdrop click will fire the closing event but closed will be passed false. If that's the case, prevent the default behaviour, and programmatically close the modal instead of dismiss. Bare in mind this will break use of dismiss, if you want to use it for its original purpose.

Malcor
  • 2,667
  • 21
  • 29