在外部单击时隐藏Angular UI Bootstrap弹出窗口

傅阿苏

2023-03-14

问题内容：

我试图手动关闭引导程序弹出窗口，以在单击document或body不是弹出窗口的任何位置时将其关闭。

我发现最接近完成此操作的方法是创建一个指令，但这是用于手动触发的，如果变量为_true_ 或 false 。

如果我单击非弹出窗口的任何内容，谁能帮助我找出如何关闭它？

我不介意使用jQuery，但$(document).click(function(e){});我不知道如何调用关闭。

<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

通常popover-trigger="focus"可以解决问题，但是我的弹出窗口包含需要单击的内容。我的ng-click弹出式窗口内部有一个_焦点，_ 如果使用 _焦点_触发器会被忽略，所以我正在寻找一种不太常规的方法来解决这个问题。

问题答案：

编辑：

这是它的工作方式（仍然漫长而详尽的解释）：

创建一个自定义指令，使您可以定位触发元素。
创建一个添加到主体的自定义指令，它将找到触发元素，并在单击该事件时触发该自定义事件。

创建一个自定义指令以触发元素为目标：

您需要从打开弹出窗口的元素中触发自定义事件处理程序（在演示中，这是按钮）。面临的挑战是将弹出框作为同级元素添加到此元素中，并且我始终认为，当您遍历DOM并期望它具有特定的结构时，事情更有可能被打破。有几种方法可以将trigger元素作为目标，但是我的方法是在单击该元素时向该元素添加一个唯一的类名（我选择“
trigger”）。在这种情况下，一次只能打开一个弹出窗口，因此使用类名是安全的，但是您可以根据自己的喜好进行修改。

自定义指令

app.directive('popoverElem', function(){
  return{
    link: function(scope, element, attrs) {
      element.on('click', function(){
        element.addClass('trigger');
      });
    }
  }
});

应用于按钮

<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>

为文档主体（或任何其他元素）创建自定义指令以触发弹出窗口关闭：

最后一步是创建一个自定义指令，该指令将定位触发元素并触发自定义事件，以在单击应用于该元素的元素时关闭弹出窗口。当然，您必须从“触发”元素中排除初始单击事件，并在弹出框内部排除所有要与之交互的元素。因此，我添加了一个名为exclude-class的属性，因此您可以定义一个可以添加到其click事件应忽略的元素上的类（不会导致弹出窗口关闭）。

为了清理问题，当触发事件处理程序时，我们将删除添加到trigger元素的trigger类。

app.directive('popoverClose', function($timeout){
  return{
    scope: {
      excludeClass: '@'
    },
    link: function(scope, element, attrs) {
      var trigger = document.getElementsByClassName('trigger');

      function closeTrigger(i) {
        $timeout(function(){ 
          angular.element(trigger[0]).triggerHandler('click').removeClass('trigger'); 
        });
      }

      element.on('click', function(event){
        var etarget = angular.element(event.target);
        var tlength = trigger.length;
        if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) {
          for(var i=0; i<tlength; i++) {
            closeTrigger(i)
          }
        }
      });
    }
  };
});

我将其添加到body标记中，以便整个页面*成为弹出窗口的可忽略背景：

<body popover-close exclude-class="exclude">

并且，我将排除类添加到了弹出框的输入中：

<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">

因此，有一些调整和陷阱，但我将留给您：

如果未定义，则应在popover-close指令的链接函数中设置默认的排除类。
您需要注意popover-close指令是元素绑定的，因此，如果删除我在html和body元素上设置的样式以使其具有100％的高度，则如果内容不包含在视口中，则可能存在“死区”填补它。

在Chrome，Firefox和Safari中进行了测试。

在外部单击时隐藏Angular UI Bootstrap弹出窗口

这是它的工作方式（仍然漫长而详尽的解释）：

创建一个自定义指令以触发元素为目标：

为文档主体（或任何其他元素）创建自定义指令以触发弹出窗口关闭：

相关阅读

相关文章

相关问答

相关工具

相关文档