Блог

Главная - Вопросы по программированию - mdDialog: перехватить событие OnClose

mdDialog: перехватить событие OnClose

#angularjs #angular-material #ondestroy #mddialog #oncloselistener

#angularjs #angular-материал #ondestroy #mddialog #oncloselistener

Вопрос:

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

Я знаю, что есть несколько альтернатив:

 scope.$on("$destroy", function () { saveMessage() });

и: 

 $mdDialog.show(...).finaly(function(){ saveMessage() });

Но обоих недостаточно:

  • Первое вызывается, когда диалоговое окно уже закрыто. Это связано с неприемлемыми требованиями (есть iFrame, который должен быть открыт)
  • Второе находится за пределами контроллера mdDialog и возлагает ответственность на вызывающего всплывающее окно, в то время как оно должно быть в самом всплывающем окне.

Итак, я ищу способ вызвать функцию ДО того, как всплывающее окно фактически закроется. Что-то вроде scope.$on("$mdDialogBeforeClose", function () { saveMessage() });

Другим вариантом было бы перехватывать каждое событие закрытия. Кажется уродливым, но может быть решением. В этом случае мне нужно было бы прослушать escape-кнопку и щелкнуть вне всплывающего окна (хотя я мог бы отключить эту функцию)…

Есть идеи получше?

Спасибо!

Редактировать:

Дополнительный вопрос: как перехватить событие escape-нажатия клавиши? Я пытался <md-dialog aria-label="List dialog" ng-keypress="keyPress($event)"> , но это даже не сработало…

Ответ №1:

Может быть, использовать onRemoving обратный вызов — CodePen

Из документов:

введите описание изображения здесь

Разметка

 <div ng-controller="MyController as vm" id="popupContainer" ng-cloak="" ng-app="app">
   <md-button class="md-primary md-raised" ng-click="vm.open($event)">
      Custom Dialog
    </md-button>

  <script type="text/ng-template" id="test.html">
    <md-dialog aria-label="Test">
        Hello!
    </md-dialog>
  </script>
</div>

JS

 angular.module('app',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('MyController', function($scope, $mdDialog) {
  this.open = function(ev) {
    $mdDialog.show(
      {
        templateUrl: "test.html",
        clickOutsideToClose: true,
        onRemoving: function (event, removePromise) {
          console.log(123);
        }
    });
  };
})

Комментарии:

1. Это имеет те же проблемы, что и во втором случае, который я описал. Мне нужно быть в контроллере модального. Мне нужно получить доступ к этой области, и я хотел бы, чтобы сам модал отвечал за сохранение сообщения при каждом закрытии (мы команда разработчиков, и есть несколько мест, где открывается диалоговое окно)

2. @ThomasStubbe Демонстрации показывают, как закрыть диалоговое окно с помощью функции в контроллере диалогового окна. Вы имеете в виду закрытие диалогового окна щелчком снаружи?

3. Демонстрация вообще не использует контроллер диалогового окна: controller: SomeDialogController его следует добавить в show-function. Внутри этого контроллера есть функция, которую необходимо выполнить перед закрытием.

4. Это то, что я хочу, за исключением того, что функция закрытия также должна запускаться при нажатии escape или щелчке вне диалогового окна. Поэтому я хочу вызвать эту функцию закрытия в любом случае, когда диалоговое окно закрывается. Два способа сделать это я описал в своем вопросе, но они либо выходят за рамки dialogController ( finally ), либо после того, как HTML уже уничтожен ( scope.$on('$destroy') )

5. @ThomasStubbe Поможет ли что-то подобное? — codepen.io/camden-kid/pen/rrzOLP?editors=1010

Ответ №2:

Диалоговое окно возвращает обещание, с помощью которого вы можете обрабатывать событие закрытия диалога

 var dialogPromise  = $mdDialog.show(
      {
        templateUrl: "test.html",
        clickOutsideToClose: true,
        onRemoving: function (event, removePromise) {
          console.log(123);
        }
    });

dialogPromise.then(function(){
   // hide method handler
   // You can write your code here that execute after dialog close
}, function(){

});