Question

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

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

我想使用

的组合

mouseenter: outsideClick

如何在不使用popover-is-open属性的情况下实现此目的？

Answer 1

你不能，文档陈述

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

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

例如，如果您的触发器如此陈述popover-trigger="mouseleave outsideClick" ，触发器mouseleave将隐藏弹出窗口而不是显示它，如果您已经单击该元素，否则它将在休假时显示它。（plunk）。

如果你可以使用popover-is-open破解它，那么继续这样做，如果它太困扰你，你总是可以请求一个功能。

Answer 2

uib-popover 指令的

popover-trigger="mouseenter outsideClick"似乎并不像人们想象的那样有效。

最初，我认为它的意思是：

在鼠标上输入以显示弹出窗口
在鼠标离开时隐藏弹出窗口
点击后，弹出式窗口保持打开状态
在外部单击关闭弹出窗口（如果它处于活动状态）

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

对于任何不支持的值，触发器将用于显示和隐藏弹出框。使用“无”触发器将禁用内部触发器，然后可以专门使用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>

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

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

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

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

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

2 个答案: