Question

我有处理模态的角度服务：

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

现在我升级到了角度1.6并得到了这个错误：

可能未处理的拒绝：背景点击

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

我试过了：

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

但这会导致我无法处理除backdrop click之外的其他错误的问题，因为它们总是被抛出：

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

如果我这样试试：

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

它解决了“未处理的拒绝”错误，但是对于每个案例都不仅仅是“背景点击”。

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

Answer 1

不幸的是，他们是如何在The official Plucker for Modal (ui.bootstrap.modal)中处理它的。

如果您点击任何按钮，它会记录如下内容：

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

他们做的是：

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

如果删除错误回调，请猜猜你得到了什么：

可能未处理的拒绝：背景点击

甚至取消

可能未处理的拒绝：取消

到目前为止，您要么这样做，要么使用此解决方法来消除未处理的拒绝

app.config(['$qProvider', function ($qProvider) {
            $qProvider.errorOnUnhandledRejections(false);
        }]);

Answer 2

使用此

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

现在它不会给你错误

Answer 3

依赖于UI规范。

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

如果情况并非如此，并且有一点＆＃39; x＆＃39;在模态的右上角和/或有一个关闭

background：false，//＆lt;＆lt;＆lt; !!!!!!! （见下面的代码）
将阻止最终用户单击OUTSIDE模式以关闭模态。

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

这将防止错误＆＃34;可能未处理的拒绝：背景点击＆＃34;从发生。

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

Answer 4

如果您在模态中使用控制器。我在结束活动中使用了这个。因为'结算'是有效的，但'解雇'是拒绝。这在你的模态控制器内，而不是父模块。

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

            });

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

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

4 个答案: