使用 angular-ui-bootstrap 创建 Hoverable popover [英] Create Hoverable popover using angular-ui-bootstrap

问题描述

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

I have the following code for creating a popover in my template file:

<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/并试图创建一个指令即.用于此目的的可见性".

I have a few clickable links on the popover. But the problem is I'm not able to hover on the popover created. I referred to the link http://jsfiddle.net/xZxkq/ and tried to create a directive viz. 'visibility' for this purpose.

代码如下:

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' 的异常，因为它是未定义的.请指出我做错了什么，以及如何从指令中显示/隐藏角度 ui 弹出窗口.我正在使用 angular ui bootstrap JS 文件.

But I get an exception for 'element.popover' since it is undefined. Please point as to what I'm doing wrong and how can I show/hide the angular ui popover from the directive. I am using angular ui bootstrap JS file.

推荐答案

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

I have solved it in a very cleaned way and thought to share it:

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

.popover is being created not as a child of the uib-popover so the idea is to wrap uib-popover with a parent and to control show&hide on hovering the parent.

.popover 和 uib-popover 是这个父级的子级所以只需设置 popover-trigger=none 就可以了.

.popover and uib-popover are children of this parent so just left to set popover-trigger=none and you have what you are wishing for.

我创建了一个 plunk 示例:

<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>

享受.

这篇关于使用 angular-ui-bootstrap 创建 Hoverable popover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！