如何为 uib-popover 使用不同的触发器组合？

Posted 2023-02-19

【中文标题】如何为 uib-popover 使用不同的触发器组合？

【英文标题】：How to use a different combination of triggers for uib-popover?

【发布时间】：2016-08-15 20:32:23

【问题描述】：

https://angular-ui.github.io/bootstrap/#/popover 的官方文档说，以下触发器组合可以作为参数传递给popover-trigger 属性：

mouseenter: mouseleave
click: click
outsideClick: outsideClick
focus: blur
none

我想使用组合

mouseenter: outsideClick

如何在不使用popover-is-open 属性的情况下实现这一点？

【问题讨论】：

您希望弹出框在鼠标输入时出现并在元素单击时消失？

是的。但稍作修正，我希望它在外部点击时消失。

在这里找到了解决方案：***.com/a/35810720/3811693 这个答案符合我的目的。

【参考方案1】：

你不能，文档状态

outsideClick 触发器将导致弹出框在单击时切换，并在单击其他任何内容时隐藏。

“任何其他”包括元素本身，因此使用outsideClick 切换元素打开或关闭会干扰其他触发器的自然行为。

例如，如果像这样声明您的触发器popover-trigger="mouseleave outsideClick" ，如果您已经单击了元素，触发器mouseleave 将隐藏弹出窗口而不是显示它，否则它只会在离开时显示它。 (plunk)。

如果您可以使用 popover-is-open 破解它，然后继续这样做，如果它太困扰您，您可以随时请求一个功能。

【参考方案2】：

popover-trigger="mouseenter outsideClick" 的 uib-popover 指令似乎不像人们想象的那样工作。

最初，我认为它的含义如下：

鼠标输入显示弹出框 鼠标离开时隐藏弹出框 点击时保持弹出框处于活动状态 如果处于活动状态，则在外部单击关闭弹出窗口

由于我不需要手动方法，因此文档中说明了以下内容。

对于任何不受支持的值，触发器将用于显示和隐藏弹出框。使用“无”触发器将禁用内部触发器，然后可以使用 popover-is-open 属性专门显示和隐藏弹出框。

所以我创建了一些 html，例如：

  <span class="glyphicon glyphicon-info-sign" 
      ng-class="'text-primary' : isInfoPopoverClicked"
      ng-click="toggleInfoPopoverClicked()"
      ng-mouseenter="enterInfoPopover()"
      ng-mouseleave="leaveInfoPopover()"
      custom-click-outside="closeInfoPopover()"
      uib-popover-template="'info.html'"
      popover-trigger="'none'"
      popover-is-open="isInfoPopoverOpen()"
      popover-placement="auto top"
      popover-append-to-body="true" >
  </span>

控制器中的JS：

  // Toggle popover's clicked active state
  $scope.toggleInfoPopoverClicked = function() 
    $scope.isInfoPopoverClicked = !$scope.isInfoPopoverClicked;
  ;
  // Close the popover, used for outside click and close action inside the template
  $scope.closeInfoPopover = function() 
    delete $scope.isInfoPopoverClicked;
  ;
  // On mouse enter, show the popover
  $scope.enterInfoPopover = function() 
    $scope.isInfoPopoverMouseEnter = true;
  ;
  // On mouse leave, close the popover.
  // If clicked active state is false set to undefined.
  // This supports when the user clicks the icon to close, 
  // that mouse enter does not immediately display the popover again.
  $scope.leaveInfoPopover = function() 
    $scope.isInfoPopoverMouseEnter = false;
    if(false === $scope.isInfoPopoverClicked) 
      delete $scope.isInfoPopoverClicked;
    
  ;
  // Expression used in the popover-is-open attribute
  $scope.isInfoPopoverOpen = function() 
    if($scope.isInfoPopoverClicked) 
      return true;
     else if(false === $scope.isInfoPopoverClicked)
      return false;
    
    return $scope.isInfoPopoverMouseEnter;
  ;

我使用的uib-popover-template的模板：

  <div custom-stop-event="click" class="pull-right">
   <span ng-click="closeInfoPopover()" class="glyphicon glyphicon-remove"></span>
   <section>info</section>
  </div>

现在更棘手的部分是这个解决方案需要我再创建两个指令。

在元素外部单击时关闭弹出框。 另一个停止在弹出窗口内触发的点击事件。阻止它关闭弹出框。

custom-click-outside 指令：

angular.module('LSPApp').directive('customClickOutside', ['$document', function ($document) 
return 
    restrict: 'A',
    scope: 
        clickOutside: '&customClickOutside'
    ,
    link: function (scope, element) 
        var handler = function (event) 
            if (element !== event.target && !element[0].contains(event.target)) 
                scope.$applyAsync(function () 
                    scope.clickOutside();
                );
            
        ;

        // Might not work on elements that stop events from bubbling up
        $document.on('click', handler);

        // Clean up event so it does not keep firing after leaving scope
        scope.$on('$destroy', function() 
            $document.off('click', handler);
        );
    
;
]);

从模板的 HTML 调用的 custom-stop-event 指令：

angular.module('LSPApp').directive('stopEvent', function () 
return 
  restrict: 'A',
  link: function (scope, element, attr) 
    element.on(attr.stopEvent, function (e) 
      e.stopPropagation();
    );
  
;
);

希望这对某人有所帮助，我的最终解决方案已将所有这些封装在它自己的指令中以促进重用。