web-dev-qa-db-ja.com

「おそらく未処理の拒否：背景クリック」を一般的な方法で処理する方法

モーダルを処理するためのangularサービスがあります：

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

今、私はangular 1.6にアップグレードし、このエラーが発生しました：

おそらく未処理の拒否：背景のクリック

モーダルを開いて別の場所（背景）をクリックすると、モーダルが閉じます（意図したとおり）。 ModalServiceを使用するたびにこのケースを処理したくないので、ModalServiceでこのunhandled exceptionを処理したいと思います。背景のクリックでモーダルを閉じることは常に問題ありません。これも例外ではありません。

私は試した：

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

「未処理の拒否」エラーを解決しますが、「背景クリック」だけでなく、すべてのケースでエラーが解決します。

この場合、誰かが良い解決策を持っていますか？

javascriptangularjserror-handlingangular-ui-bootstrapangular-ui
21
Andi

残念ながら、それが The Modal（ui.bootstrap.modal）の公式Plucker での処理方法です。

いずれかのボタンをクリックすると、次のようなログが記録されます。

モーダル解散：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);
        }]);
21
Veglos

これを使って

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

今、それはあなたにエラーを与えることはありません

9
jitendra varshney

UI仕様に依存します。

エンドユーザーがモーダルを閉じるためにモーダルの外側をクリックする必要があるUI仕様がある場合、これは最大の回避策ではありません。

それが当てはまらず、モーダルの右上に小さな「x」がある場合、および/または近くにある場合

背景：false、// <<< !!!!!!! （以下のコードを参照）
は、エンドユーザーがモーダルの外側をクリックしてモーダルを閉じるのを防ぎます。

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

これにより、「おそらく未処理の拒否：背景のクリック」というエラーが発生しなくなります。

繰り返しますが、これを実装するには、UI仕様を確認するか、アナリストから許可を得る必要があります。

4
gBerger101

モーダル内でコントローラーを使用している場合。私はこれを終了イベントで使用しました。 「閉鎖」は有効ですが、「却下」は拒否であるためです。これは、親ではなく、モーダルコントローラー内で行われます。

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

            });

そのため、背景のクリックは終了イベントを発生させますが、終了はfalseを渡します。その場合は、デフォルトの動作を禁止し、却下するのではなくプログラムでモーダルを閉じます。本来の目的で使用する場合は、これにより却下の使用が中断されることに留意してください。

3
Malcor