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

我有以下代码在我的模板文件中创建一个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.它缺乏样式,但它应该展示它的工作原理.

原文链接：https://www.f2er.com/angularjs/140564.html

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

猜你在找的Angularjs相关文章