mdDialog: поймать событие onClose

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

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

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

и:

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

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

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

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

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

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

Спасибо!

ИЗМЕНИТЬ:

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


angularjs angular-material ondestroy mddialog oncloselistener
person Thomas Stubbe    schedule 29.09.2016    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Возможно, используйте обратный вызов 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);
        }
    });
  };
})
person camden_kid    schedule 29.09.2016
comment
Здесь те же проблемы, что и во втором случае, который я описал. Мне нужно быть в контроллере модального окна. Мне нужен доступ к этой области, и я хотел бы, чтобы сам модал отвечал за сохранение сообщения при каждом закрытии (мы команда разработчиков, и есть несколько мест, где открывается диалог) - person Thomas Stubbe; 29.09.2016
comment
@ThomasStubbe В демонстрациях показано, как закрыть диалог с помощью функции в контроллере диалога. Вы имеете в виду закрытие диалога, щелкнув снаружи? - person camden_kid; 29.09.2016
comment
Демонстрация вообще не использует диалоговый контроллер: controller: SomeDialogController нужно добавить в функцию шоу. Внутри этого контроллера есть функция, которую необходимо выполнить перед закрытием. - person Thomas Stubbe; 29.09.2016
comment
@ThomasStubbe Я немного запутался :-) Это работает для вас? - codepen.io/camden-kid/pen/rrzOLP?editors=1010 #0 - person camden_kid; 29.09.2016
comment
Это то, что я хочу, за исключением того, что функция закрытия также должна запускаться при нажатии escape или нажатии вне диалогового окна. Поэтому я хочу вызывать эту функцию закрытия в любом случае, когда диалоговое окно закрывается. Два способа сделать это, которые я описал в своем вопросе, но они либо выходят за рамки диалогового контроллера (finally), либо после того, как HTML уже уничтожен (scope.$on('$destroy')) - person Thomas Stubbe; 29.09.2016
comment
@ThomasStubbe Может ли что-то вроде этого помочь? - codepen.io/camden-kid/pen/rrzOLP?editors=1010 - person camden_kid; 29.09.2016
comment
Это действительно возможность, которую я еще не рассматривал, и сделал бы эту работу =) Но я боюсь, что не могу ее использовать: у меня есть 2 конкретных DialogController, в зависимости от типа сообщения, и они расширяются от другой BaseDialogController. Каждый из них содержит более 200 строк, и я вызываю show() из разных мест, поэтому я не могу просто передать область действия DialogController, это вызовет много проблем. Вы знаете способ сделать это, но с новой областью действия для DialogController, вместо того, чтобы передавать его? - person Thomas Stubbe; 29.09.2016
comment
Я мог бы создать новую область перед вызовом show(): $rootScope.Scope([providers], [instanceCache]); - person Thomas Stubbe; 29.09.2016
comment
@ThomasStubbe Как насчет использования сервиса? codepen.io/camden-kid/pen/vXJKOX?editors=1010 - person camden_kid; 29.09.2016
comment
Мне нужно получить доступ к функциям этой области в действии beforeClose()... Есть остальные вызовы (например, 4 из них подряд), которым нужна область действия mdDialog... Это работает: var scope = model.$new(true); и $mdDialog.show({ ... onRemoving: function() { scope.onDestroy().then(function () { }); }, ... Но теперь мне нужно найти способ предотвратить возврат функции до тех пор, пока обещание не вернется - person Thomas Stubbe; 29.09.2016
comment
@ThomasStubbe Извините, я не мог помочь. Удачи. - person camden_kid; 29.09.2016
comment
@ThomasStubbe Почему вам нужно предотвратить возврат функции? С preserveScope: true я ожидаю, что функции все еще будут работать после закрытия. Или вы хотите предотвратить закрытие в определенных ситуациях? В этом случае повторное открытие модального окна было бы идеей. - person fishbone; 12.04.2021

arrow_upward
3
arrow_downward

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

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(){

});
person Dipten    schedule 16.02.2018