javascript - tag - title of page html

Cómo manejar ''Rechazo posiblemente no controlado: clic de fondo'' de forma general

Question

Tengo un servicio angular para manejar modales:

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

Ahora me actualicé al angular 1.6 y obtuve este error:

Rechazo no controlado: clic de fondo

cada vez que abro un modal y hago clic en otro lugar (el fondo) y el modal se cierra (como estaba previsto). Así que quiero manejar esta unhandled exception en mi ModalService ya que no quiero manejar este caso cada vez que uso el ModalService . Siempre está bien cerrar el modal mediante clic de fondo, esta no es una excepción.

Lo intenté:

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

Pero esto lleva al problema de que no puedo manejar otros errores además del backdrop click ya que siempre se lanzan:

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

Y si lo intento así:

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

resuelve el error de "rechazo no controlado", pero para todos los casos no solo para "fondo hecho clic".

¿Alguien tiene una buena solución para este caso?

Answer 1

Desafortunadamente, así es como lo manejan en El plucker oficial para Modal (ui.bootstrap.modal) .

Si haces clic en cualquier botón, registra algo como esto:

Modal despedido en: jue 23 feb. 2017 21:54:26 GMT-0300 (Pacific Daylight Time)

Lo que hacen es:

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

Si eliminas la devolución de llamada por error, adivina qué obtienes:

Rechazo no controlado: clic de fondo

E incluso en cancelar

Rechazo no controlado: cancelar

Hasta ahora, puedes hacer eso o usar esta solución alternativa para silenciar los rechazos no controlados

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

Answer 2

Si estás usando un controlador dentro de tu modal. Lo usé en el evento de clausura. Porque ''Cerrar'' es válido, pero ''Descartar'' es un rechazo. Esto va dentro de tu controlador modal, no del padre.

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

            });

Por lo tanto, su clic de fondo disparará el evento de cierre pero se pasará a falso. Si ese es el caso, evite el comportamiento predeterminado y cierre programáticamente el modal en lugar de descartarlo. Sin tener en cuenta, esto interrumpirá el uso del despido, si desea usarlo para su propósito original.

Answer 3

UI depende de la especificación.

Esta NO es la mayor solución si hay especificaciones de UI que el usuario final debe poder hacer clic fuera del modal para cerrar el modal.

Si ese NO es el caso y hay una pequeña ''x'' en la parte superior derecha del modal y / o hay un cierre

telón de fondo: falso, // <<< !!!!!!! (ver el código a continuación)
impedirá que el usuario final haga clic en FUERA del modal para cerrar el modal.

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

Esto evitará que se produzca el error "Posible rechazo no controlado: clic de fondo".

Una vez más, debe observar las especificaciones de UI y / o obtener el permiso de los analistas para implementar esto.

Answer 4

utilizar esta

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

ahora no te dará error