Предотвращение закрытия модального окна AngularJS на основе логики внутри модального контроллера

Есть ли способ предотвратить закрытие/закрытие модального окна AngularJS в логике контроллера модального окна?

Я хочу показать предупреждение, когда пользователи закрывают модальное окно, а форма внутри модального окна содержит несохраненные данные.

Я пытался найти событие перед закрытием или что-то еще, что я мог бы использовать в официальной документации, но пока безуспешно.


angularjs angular-ui angular-bootstrap
person Mark    schedule 10.02.2015    source источник
comment
В документах они используют функцию отмены при нажатии на кнопку отмены. Который затем вызывает $modalInstance.dismiss('cancel'); внутри ModalInstanceCtrl. Вы не можете просто проверить там, есть ли несохраненные данные?   -  person Viktor    schedule 10.02.2015
comment
К сожалению, модальное окно также закрывается, когда пользователь щелкает фон или нажимает клавишу выхода, эту функцию следует оставить без изменений.   -  person Mark    schedule 10.02.2015
comment
Я проверил исходный код модальной директивы и не могу найти ничего, что позволило бы вам предотвратить ее закрытие. Либо разветвите его и измените модуль, либо используйте что-то еще. Вы могли бы предложить этот подвиг команде angular-ui, может быть, даже добавить его самостоятельно.   -  person Viktor    schedule 10.02.2015

Ответы (3)


arrow_upward
7
arrow_downward

Вы можете наблюдать за событием modal.closing, транслируемым в область действия модального окна, например так:

.controller('modalCtrl', function($scope, $modalInstance) {

  $scope.$on('modal.closing', function(event, reason, closed) {
      var r = prompt("Are you sure you wanna close the modal? (Enter 'YES' to close)");

      if (r !== 'YES') {
        event.preventDefault();
      }
  });
})

Первый параметр — это событие, которое можно preventDefault() предотвратить, чтобы оно не закрывалось.

Второй параметр — это причина (все, что передается методу $close())

Третий параметр — это логическое значение, указывающее, было ли модальное окно закрыто или закрыто.

Вот работающий плункер.

Я не знаю, когда это было добавлено, но в настоящее время это упоминается в официальной документации.

person Victor Gomes    schedule 21.09.2015

arrow_upward
2
arrow_downward

Если вы установите backdrop: 'static' в своем modalInstance, решите проблему?

Так:

var modalInstance = $modal.open({
  ...
  backdrop: 'static',
  ...
});

Затем вам нужно только управлять кнопкой ngClick, отвечающей за закрытие модального окна.

Надеюсь это поможет.

ОБНОВЛЕНИЕ 1 [только дополнительная информация]

Используйте keyboard: false для отключения Escape:

var modalInstance = $modal.open({
  ...
  backdrop: 'static',
  keyboard: false
  ...
});

ОБНОВЛЕНИЕ 2

Погуглил и нашел вариант. В вашем модальном контроллере используйте:

$modalInstance.result.then(function (e) {
    //...
}, function (e) {
    //called before modal close
});

Пример:

var modalInstance = $modal.open({
  templateUrl: templateUrl,
  controller: modalController
});

function modalController($scope, $modalInstance){

... //your code

  $modalInstance.result.then(function (e) {
      //...
  }, function (e) {
      //called before modal close
  });

... //your code

}

Но вам нужен способ не продолжать события, чтобы закрыть модальное окно. Или разрешить пользователю сохранять данные перед закрытием модального окна. Вот что зашло так далеко.

ОБНОВЛЕНИЕ 3

Проверьте это.

person Doug    schedule 10.02.2015
comment
Спасибо, что подумали, я тоже думал об этом, но владелец продукта хочет, чтобы диалоговое окно можно было закрыть при выборе фона. Так что сделать его статичным, к сожалению, не вариант. - person Mark; 10.02.2015
comment
Большое спасибо! Правильно ли я понимаю, что в последнем обновлении указано, как перехватить событие, но не способ предотвратить его появление? - person Mark; 10.02.2015
comment
Я считаю, что нет способа предотвратить закрытие модального окна, как я понимаю, что вы хотите. Вы можете попытаться переопределить методы модального окна. Любые новости, которые у меня есть, я обновлю свой ответ. - person Doug; 19.02.2015

arrow_upward
2
arrow_downward

Это предотвратит запуск фоном события $modal.close:

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});

Клавиша ESC на клавиатуре по-прежнему может закрыть модальное окно, поэтому, если вы хотите отключить это, используйте keyboard: false

person chovy    schedule 07.09.2016