单击外部/ esc时Angularjs引导模态关闭调用

I am using the Angular-ui/bootstrap modal in my project.

我在我的项目中使用Angular-ui / bootstrap模式。

Here is my modal:

这是我的模态：

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

One is able to close the modal by clicking the ESC button or clicking outside the modal area. Is there a way to run a function when this happens? I am not quite sure how to catch the sort of closing.

可以通过单击ESC按钮或在模态区域外单击来关闭模态。有没有办法在发生这种情况时运行一个函数？我不太清楚如何抓住那种结束。

I know that I can manually dismiss a modal by having a ng-click="closeModal()" like this:

我知道我可以通过像这样使用ng-click =“closeModal（）”来手动关闭模态：

$scope.closeModal = function () {
    $scope.theModal.dismiss('cancel');
};

If anyone could help, it would be greatly appreciated.

如果有人可以提供帮助，我们将不胜感激。

3 个解决方案

#1

Yes you can. It causes a dismiss event and the promise is rejected in that case. Also, note that the $modal.open() method returns an object that has a result property that is a promise.

是的你可以。它导致解雇事件，并且在这种情况下拒绝承诺。另请注意，$ modal.open（）方法返回一个具有promise属性的对象。

With the promise you can...

有了你的承诺，你可以......

//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
});

as a shortcut you could write:

作为你可以写的捷径：

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

See ref

见参考

The open method returns a modal instance, an object with the following properties:

open方法返回一个模态实例，一个具有以下属性的对象：

close(result) - a method that can be used to close a modal, passing a result

close（result） - 一种可用于关闭模态，传递结果的方法

dismiss(reason) - a method that can be used to dismiss a modal, passing a reason

dismiss（reason） - 一种可用于解除模态，传递理由的方法

result - a promise that is resolved when a modal is closed and rejected when a modal is dismissed

结果 - 在模式关闭时解决的承诺，在解除模态时拒绝

opened - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables 'rendered' - a promise that is resolved when a modal is rendered.

打开 - 在下载内容模板并解析所有变量“渲染”后打开模态时解决的承诺 - 在呈现模式时解析的承诺。

#2

Old question, but if you want to add confirmation dialogs on various close actions, add this to your modal instance controller:

旧问题，但如果要在各种关闭操作上添加确认对话框，请将其添加到模态实例控制器：

$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();
    }
});

I have a close button on the top right of mine, which triggers the "cancel" action. Clicking on the backdrop (if enabled), triggers the cancel action. You can use that to use different messages for various close events. Thought I'd share in case it's helpful for others.

我的右上角有一个关闭按钮，触发“取消”动作。单击背景（如果已启用），将触发取消操作。您可以使用它为各种关闭事件使用不同的消息。以为我会分享，以防其他人有用。

#3

You can use the "result" promise returned by $modal.open() method. As bellow:

您可以使用$ 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!!!");
      });
 }

Also you can use "finally" callback of "result" promise as below:

您也可以使用“结果”承诺的“最终”回调，如下所示：

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

#1