加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 09:29:30 所属栏目:安全 来源:网络整理
导读:我有以下代码在我的模板文件中创建一个popover: span class="icon-globe visibility" id="visibilityFor{{post.metaData.assetId}}" popover="{{post.visibilityListStr}}" popover-placement="right" popover-trigger="mouseenter" popover-popup-delay="5
我有以下代码在我的模板文件中创建一个popover:
<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>

我在popover上有几个可点击的链接.但问题是我无法将鼠标悬停在创建的popover上.我引用了链接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',200);
        });

    }
  }
});

但是,由于它是未定义的,因此我收到’element.popover’的异常.请指出我在做错什么,如何从指令中显示/隐藏角ui popover.我正在使用角ui引导JS文件.

我不知道这是否与OP相关,但是我也有同样的问题,幸运的是我设法解决了这个问题.

未定义的错误

首先,您所获得的未定义的错误可能是(至少在我的情况下),因为您使用的是ui-bootstrap的开发版本.在我的情况下,我尝试绑定element.popover时遇到这个错误.添加图书馆的最小化版本后,错误就会消失.

将鼠标悬停在上方时保持弹出窗口

为此,我创建了一个使用ui-bootstrap库中的popover的自定义指令.

指示

app.directive('hoverPopover',function ($compile,$templateCache,$timeout,$rootScope) {
var getTemplate = function (contentType) {
    return $templateCache.get('popoverTemplate.html');
};
return {
    restrict: 'A',attrs) {
        var content = getTemplate();
        $rootScope.insidePopover = false;
        $(element).popover({
            content: content,placement: 'top',html: true
        });
        $(element).bind('mouseenter',function (e) {
            $timeout(function () {
                if (!$rootScope.insidePopover) {
                    $(element).popover('show');
                    scope.attachEvents(element);
                }
            },200);
        });
        $(element).bind('mouseleave',function (e) {
            $timeout(function () {
                if (!$rootScope.insidePopover)
                    $(element).popover('hide');
            },400);
        });
    },controller: function ($scope,function () {
                $rootScope.insidePopover = false;
                $(element).popover('hide');
            });
        }
    }
};
});

此指令还接受popover的自定义模板,因此您不限于标题和其中的一些文本.您可以创建自己的html模板并将其提供给控件.

用法

<a href="#" hover-popover>Click here</a>

希望这可以帮助别人在未来:)

编辑

根据要求,这是一个Fiddle link.它缺乏样式,但它应该展示它的工作原理.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读