How do I trigger the Cancel event when I click out of the modal or Esc grip?

Question

Problem with modal output $uibModal:

var modalInstance = $uibModal.open({
                     animation: true,
                     templateUrl: 'detalhes_leitura.html',
                     controller: 'ModalController',
                     size: size,
                     backdrop:true,
                     keyboard:true,
                     resolve: {
                         dados: function () {
                             return $scope.result_items;
                         }
                     }});

When I click out of the modal, it closes the modal, but does not trigger the cancel event. I know that if you change backdrop:'Static' and Keyboard:false, it locks the modal closure, but this way it doesn’t look cool, I just want it to execute the Cancel method inside the modal control when the person clicks outside the modal.

$scope.cancel();

How to make it fire?

Answer 1

In Angularui, the property result of the object returned by $uibModal.open is a Promise that solves when the modal is closed using the function $uibModalInstance.close and rejects when the modal is closed through $uibModalInstance.dismiss (also called when user clicks out of modal).

Your code would look like this:

var modalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'detalhes_leitura.html',
  controller: 'ModalController',
  size: size,
  backdrop: true,
  keyboard: true,
  resolve: {
    dados: function() {
      return $scope.result_items
    }
  }
})

modalInstance.result
  .then(function(valor){
      // modal fechado usando $uibModalInstance.close
  })
  .catch(function(valor){
      // modal fechado usando $uibModalInstance.dismiss
      // ou clicando fora do modal
  })

In your modal controller would have some code like this:

app.controller('ModalController', function($scope, $uibModalInstance, dados){
   $scope.fecharModalSucesso = function(){
      $uibModalInstance.close()
   }

   $scope.fecharModalCancelar = function(){
      $uibModalInstance.dismiss()
   }
})

More information here.