如何处理'可能未处理的拒绝：背景点击'一般方式

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:

现在我升级到角度1.6并得到此错误：

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.

每当我打开一个模态并单击其他地方（背景）并且模态关闭（按预期）。所以我想在我的ModalService中处理这个未处理的异常，因为我每次使用ModalService时都不想处理这种情况。通过背景点击关闭模态总是可以的，这也不例外。

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?

有没有人为这个案子提供一个好的解决方案？

4 个解决方案

#1

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

不幸的是，他们是如何处理官方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)

Modal被解雇：2017年2月23日星期四21:54:26 GMT-0300（太平洋SA日光时间）

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);
        }]);

#2

use this

用这个

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

now it will not give you error

现在它不会给你错误

#3

UI Specification dependent.

UI规范依赖。

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.

如果有最终用户必须能够点击模态以关闭模态的UI规范，这不是最好的解决方法。

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

如果不是这种情况，并且模态右上角有一个“x”和/或有一个关闭

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.

再次，您需要查看UI规范和/或获得分析师的许可以实现此目的。

#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.

因此，您的背景点击将触发结束事件，但已关闭将传递false。如果是这种情况，请阻止默认行为，并以编程方式关闭模式而不是关闭。如果您想将其用于其原始目的，请记住这将打破使用解雇。