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

位于：的官方文档说明可以将以下触发器组合作为参数传递给

popover trigger

属性：

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

我想结合使用

mouseenter: outsideClick

---

如何在不使用

popover is open

属性的情况下实现这一点？

您不能，文档状态为

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

“其他任何东西”都包括元素本身，因此使用

outside单击打开或关闭来切换元素会干扰其他触发器的自然行为

例如，如果像这样陈述您的触发器
popover trigger=“mouseleave outsideClick”
，如果您已经单击了元素，则触发器
mouseleave
将隐藏弹出窗口，而不是显示它，否则它将只在离开时显示它。（）

如果您可以使用popover is open来破解它，那么继续这样做，如果它给您带来太多麻烦，您可以随时请求一项功能。
popover trigger=“mouseenter outsideClick”
，因为指令似乎不像人们想象的那样工作

起初，我认为这意味着：

在鼠标输入时显示弹出框
鼠标左键隐藏popover
单击“保持popover在活动状态下打开”
在“外部”上，如果处于活动状态，请单击“关闭”弹出窗口
由于我不需要手动方法，文档中说明了以下内容

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

因此，我创建了一些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>

我使用的
uib popover模板的模板是：

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

从模板的HTML调用的
自定义停止事件
指令：

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

希望这对某些人有所帮助，我的最终解决方案将所有这些封装在它自己的指令中，以促进重用。
是否希望弹出框显示在鼠标输入上，并在元素单击时消失？是的。但稍微更正一下，我希望它出现在outsideclick上。在这里找到了一个解决方案：这个答案符合我的目的。
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);
        });
    }
};
}]);

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