Angularjs Bootstrap модальный закрывающий вызов при нажатии снаружи /esc

Ответ 1

Да, вы можете. Это вызывает событие отклонения, и в этом случае обещание отклоняется. Также обратите внимание, что метод $modal.open() возвращает объект, у которого есть свойство result, которое является обещанием.

С обещанием вы можете...

//This will run when modal dismisses itself when clicked outside or
//when you explicitly dismiss the modal using .dismiss function.
$scope.theModal.result.catch(function(){
    //Do stuff with respect to dismissal
});

//Runs when modal is closed without being dismissed, i.e when you close it
//via $scope.theModal.close(...);
$scope.theModal.result.then(function(datapassedinwhileclosing){
    //Do stuff with respect to closure
});

в качестве ярлыка, который вы могли бы написать:

 $scope.theModal.result.then(doClosureFn, doDismissFn);

См. ref

Открытый метод возвращает модальный экземпляр, объект со следующими свойствами:

• close (result) - метод, который можно использовать для закрытия модального файла, передавая результат
• увольнение (причина) - метод, который может использоваться для отклонения модального кода, передачи причины
• результат - обещание, которое разрешается, когда модальный объект закрыт и отклонен, когда модаль отклонен.
• открыт - обещание, которое разрешается, когда модаль открывается после загрузки шаблона контента и разрешения всех переменных "rendered" - обещание, которое разрешается при рендеринге модальности.

Ответ 2

Старый вопрос, но если вы хотите добавить диалоги подтверждения при различных действиях закрытия, добавьте это в свой модальный контроллер экземпляра:

$scope.$on('modal.closing', function(event, reason, closed) {
    console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
    var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
    switch (reason){
        // clicked outside
        case "backdrop click":
            message = "Any changes will be lost, are you sure?";
            break;

        // cancel button
        case "cancel":
            message = "Any changes will be lost, are you sure?";
            break;

        // escape key
        case "escape key press":
            message = "Any changes will be lost, are you sure?";
            break;
    }
    if (!confirm(message)) {
        event.preventDefault();
    }
});

У меня есть кнопка закрытия в правом верхнем углу моей, которая вызывает действие "отменить". Щелчок по фону (если включен) вызывает действие отмены. Вы можете использовать это для использования разных сообщений для различных событий закрытия. Думал, что я поделюсь тем, что это будет полезно для других.

Ответ 3

Вы можете использовать обещание "результат", возвращаемое методом $modal.open(). Как ниже:

 $scope.toggleModal = function () {
      $scope.theModal = $modal.open({
          animation: true,
          templateUrl: 'pages/templates/modal.html',
          size: "sm",
          scope: $scope
      });

      $scope.theModal.result.then(function(){
          console.log("Modal Closed!!!");
      }, function(){
          console.log("Modal Dismissed!!!");
      });
 }

Также вы можете использовать "окончательный" ответ "обещание результата", как показано ниже:

     $scope.theModal.result.finally(function(){
          console.log("Modal Closed!!!");
      });

Ответ 4

В моем случае, когда вы щелкали по модалу, мы хотели отобразить подсказку, предупреждающую пользователя о том, что при этом все несохраненные данные в модальной форме будут отброшены. Для этого на модале установите следующие параметры:

var myModal = $uibModal.open({
          controller: 'MyModalController',
          controllerAs: 'modal',
          templateUrl: 'views/myModal.html',
          backdrop: 'static',
          keyboard: false,
          scope: modalScope,
          bindToController: true,
        });

Это предотвращает закрытие модального окна при нажатии кнопки:

backdrop: 'static'

И это предотвращает закрытие модала при нажатии клавиши "esc":

keyboard: false

Затем в модальном контроллере добавьте пользовательскую функцию "отмена" - в моем случае всплывает приятное предупреждение, спрашивающее, хочет ли пользователь закрыть модальное окно:

  modal.cancel = function () {
    $timeout(function () {
      swal({
        title: 'Attention',
        text: 'Do you wish to discard this data?',
        type: 'warning',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        showCancelButton: true,
      }).then(function (confirm) {
        if (confirm) {
          $uibModalInstance.dismiss('cancel');
        }
      });
    })
  };

И, наконец, внутри модального контроллера добавьте следующие прослушиватели событий:

  var myModal = document.getElementsByClassName('modal');
  var myModalDialog = document.getElementsByClassName('modal-dialog');

  $timeout(function () {
    myModal[0].addEventListener("click", function () {
      console.log('clicked')
      modal.cancel();
    })

    myModalDialog[0].addEventListener("click", function (e) {
      console.log('dialog clicked')
      e.stopPropagation();
    })
  }, 100);

"myModal" - это элемент, для которого вы хотите вызвать функцию обратного вызова modal.cancel(). "myModalDialog" - это окно модального содержимого - мы прекращаем распространение событий для этого элемента, чтобы оно не всплыло до "myModal".

Это работает только для нажатия модальной (другими словами, щелкая фоном). Нажатие "esc" не вызовет этот обратный вызов.

Ответ 5

Вместо ng-click="closeModal()" вы можете попробовать ng-click="$dismiss()"

<button ng-click="$dismiss()">Close</button>

Ответ 6

Мы также можем вызвать событие jquery 'On' в контроллере следующим образом. здесь "viewImageModal" - это идентификатор модального всплывающего окна.

constructor($scope: AuditAppExtension.IActionPlanScope, dataSvc: ActionPlanService, Upload, $timeout, $mdToast: any) {

            $('#viewImageModal').on('shown.bs.modal', function (e) {
                console.log("shown", e);

                $scope.paused = false;
                $modal.find('.carousel').carousel('cycle');
            });

            $('#viewImageModal').on('hide.bs.modal', function (e) {
                console.log("hide", e);

                return true;
            });
}