angularjs - 使用 angular-ui-bootstrap 创建 Hoverable popover

Question

我有以下代码用于在我的模板文件中创建一个弹出框:

<span class="icon-globe visibility" 
      id="visibilityFor{{post.metaData.assetId}}" 
      popover="{{post.visibilityListStr}}" 
      popover-placement="right" 
      popover-trigger="mouseenter" 
      popover-popup-delay="50" 
      visibility>
</span>

我在弹出窗口上有一些可点击的链接。但问题是我无法将鼠标悬停在创建的弹出窗口上。我引用了链接 http://jsfiddle.net/xZxkq/
并试图创建一个指令即。为此目的的“可见性”。

这是代码:

myAppModule.directive("visibility", function ($timeout,$rootScope) {
  return {

    controller: function ($scope, $element) {
        $scope.attachEvents = function (element) {
            $('.popover').on('mouseenter', function () {
                $rootScope.insidePopover = true;
            });
            $('.popover').on('mouseleave', function () {
                $rootScope.insidePopover = false;
                $(element).popover('hide');
            });
        }
    },
    link: function (scope, element, attrs) {
        $rootScope.insidePopover = false;

        element.bind('mouseenter', function (e) {
            $timeout(function () {
                if (!$rootScope.insidePopover) {
                    element.popover('show');
                    attachEvents(element);
                }
            }, 200);
        });

        element.bind('mouseout', function (e) {
            $timeout(function () {
                if (!$rootScope.insidePopover) {
                    element.popover('show');
                    attachEvents(element);
                }
            }, 200);
        });

    }
  }
});

但是我得到了 'element.popover' 的一个异常(exception)，因为它是未定义的。请指出我做错了什么，以及如何从指令中显示/隐藏 Angular ui 弹出窗口。我正在使用 angular ui bootstrap JS 文件。

Answer 1

我已经以一种非常干净的方式解决了它，并想分享它:

.popover 不是作为 的子项创建的uib-popover
所以这个想法是包装 uib-popover 与父级并在悬停父级时控制显示和隐藏。

.popover 和 uib-popover 是这个 parent 的 child
所以就离开设置弹出触发器=无你有你想要的。

我创建了一个 plunk example :

<span ng-init="popoverOpened=false" ng-mouseover="popoverOpened=true" ng-mouseleave="popoverOpened=false">
    <button class="btn btn-default" uib-popover-html="htmlPopover" 
            popover-trigger="none" popover-placement="bottom-left" popover-is-open="popoverOpened" >
       <span>hover me</span>
    </button>
</span>

请享用。