Question

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

    $scope.cancel=function(){
    });

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

    $scope.dismiss=function(){
    });

我如何捕获该事件？

我见过AngularJS的很多文章，但无法找到解决方案。

Answer 1

$modal.open()返回带有promise的对象。您可以使用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，这有助于你在承诺的帮助下在更高的层次上做到这一点。

Answer 2

您可以使用

backdrop: 'static'

在您的选项中。像这样：

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

Bootstrap 3.0 Documentation说明backdrop: 'static'指定的背景不会忽略点击模式。

Answer 3

抓住html文档的所有点击，然后关闭模式。

抓住模式内的点击并停止传播。

即

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

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

Answer 4

我在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

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

点击角度ui bootstrap模式时如何捕捉背景点击事件？

4 个答案: