从角度 ui 引导模式中单击时如何捕获背景单击事件？

Posted 2023-02-22

【中文标题】从角度 ui 引导模式中单击时如何捕获背景单击事件？

【英文标题】：How to catch backdrop click event when clicked out of angular ui bootstrap modal?

【发布时间】：2014-10-15 10:19:28

【问题描述】：

在我的应用程序中，它使用$modal.open() 函数打开一个使用另一个页面作为模板的模式弹出窗口。单击按钮时，它显示模态弹出窗口正常。如果我单击取消按钮，那么它正在调用此函数并且也可以正常工作。

    $scope.cancel=function()
    );

但如果用户在模式弹出窗口之外点击，我们无法通过此代码捕获该事件

    $scope.dismiss=function()
    );

如何捕捉该事件？

看过很多AngularJS的文章，但是没找到解决办法。

【参考方案1】：

你可以使用

backdrop: 'static'

在您的选择中。像这样：

var modalInstance = $modal.open(
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    backdrop: 'static',
    ...
);

Bootstrap 3.0 Documentation 解释说，backdrop: 'static' 指定了一个在点击时不会关闭模式的背景。

【参考方案2】：

我在使用 Angular Mobile UI Demo (1.2) 时遇到了同样的问题，但是在演示文件中，模态未在主 JS 中声明。

相反，只需在 modal1.html 中添加两个变量就可以了。

<div class="modal-dialog" ui-outer-click="Ui.turnOff('modal1')" ui-outer-click-if="Ui.active('modal1')">

这里解释： http://mobileangularui.com/docs/#outer-click

这两个属性都需要它才能工作。

【参考方案3】：

捕获对 html 文档的所有点击，并关闭模态框。

在模态框内捕捉点击并停止传播。

即

$("html").on("click",closemodal());

$(".modal").on("click",function(event)
   event.stopPropagation();

【讨论】：

在某些情况下我喜欢这种方法。

【参考方案4】：

$modal.open() 返回一个带有承诺的对象。你可以使用 promise 并将其链接起来，然后在 catch 中处理它。当您单击外部背景时，它会在内部执行 dismiss 并拒绝承诺。

例如：-

var instance = $modal.open(...);

 instance.result.then(function()
  //Get triggers when modal is closed
 , function()
  //gets triggers when modal is dismissed.
 );

如果您在注入$modalInstance 的孩子中使用它，您也可以在那里执行此操作。所以基本上而不是处理event，这可以帮助你在promise的帮助下在更高的层次上做这件事。

【讨论】：

当用户点击背景时如何返回值，我需要在关闭、取消、背景点击事件时更新另一个控制器中的值，请告诉我该怎么做？

@ratnakar 你可以返回一个被拒绝的承诺，其值为 ex:- 从 catch 块中返回 $q.reject(value)，或者只是返回值，然后可以将其链接到 then 块中。