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

Question

我有以下代码在我的模板文件中创建一个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上有一些可点击的链接.但问题是我无法悬停在创建的弹出窗口上.我提到链接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'的例外,因为它未定义.请指出我做错了什么,如何显示/隐藏指令中的角度ui popover.我正在使用angular ui bootstrap JS文件.

Answer 1

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

.popover不是作为uib-popover的子节点创建的, 所以我的想法是用父节点包装uib-popover并控制在悬停父节点时显示和隐藏.

.popover和uib-popover是这个父级的子级,所以只需要设置popover-trigger = none,你就拥有了你想要的东西.

我创建了一个插件示例:

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

请享用.

Answer 2

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

未定义的错误

首先,你得到的未定义错误可能是(至少在我的情况下)因为你正在使用的开发版本ui-bootstrap.在我的情况下,我尝试绑定时遇到此错误element.popover.添加库的缩小版本后,错误就消失了.

悬停在弹出窗口上时保持弹出窗口打开

要做到这一点我创建了一个自定义的指令,利用了popover从ui-bootstrap图书馆.

指示

app.directive('hoverPopover', function ($compile, $templateCache, $timeout, $rootScope) {
var getTemplate = function (contentType) {
    return $templateCache.get('popoverTemplate.html');
};
return {
    restrict: 'A',
    link: function (scope, element, 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, $element) {
        $scope.attachEvents = function (element) {
            $('.popover').on('mouseenter', function () {
                $rootScope.insidePopover = true;
            });
            $('.popover').on('mouseleave', function () {
                $rootScope.insidePopover = false;
                $(element).popover('hide');
            });
        }
    }
};
});

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

用法

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

希望这对未来的其他人有帮助:)

编辑

根据要求,这是一个小提琴链接.它缺乏造型,但它应该展示它的工作方式.

Answer 3

我认为Cosmin拥有可靠的popover权利,但似乎确实使用了Twitter Bootstrap popover方法.我们的想法是只使用AngularJS和AngularJS的Bootstrap包装器之一来实现这个可扩展的popover,它是UI Bootstrap或AngularStrap.

所以我把一个只使用AngularStrap的实现放在一起:

myApp.directive('hoverablePopover', function ($rootScope, $timeout, $popover) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {

            element.bind('mouseenter', function (e) {
                $timeout(function () {
                    if (!scope.insidePopover) {

                        scope.popover.show();
                        scope.attachEventsToPopoverContent();
                    }
                }, 200);
            });

            element.bind('mouseout', function (e) {
                $timeout(function () {
                    if (!scope.insidePopover) {

                        scope.popover.hide();
                    }
                }, 400);
            });

        },
        controller: function ($scope, $element, $attrs) {

            //The $attrs will server as the options to the $popover.
            //We also need to pass the scope so that scope expressions are supported in the  popover attributes
            //like title and content.
            $attrs.scope = $scope;
            var popover = $popover($element, $attrs);
            $scope.popover = popover;
            $scope.insidePopover = false;

            $scope.attachEventsToPopoverContent = function () {

                $($scope.popover.$element).on('mouseenter', function () {

                    $scope.insidePopover = true;

                });
                $($scope.popover.$element).on('mouseleave', function () {

                    $scope.insidePopover = false;
                    $scope.popover.hide();

                });
            };
        }
    };
});

当你有一个popover元素时,你需要考虑你有触发弹出窗口的元素,并且你也有元素包含实际的popover内容.

当您将鼠标悬停在具有实际弹出窗口内容的元素上时,我们的想法是保持弹出窗口打开.对于我的指令,链接函数负责触发弹出窗口的元素并附加mouseenter/mouseout事件处理程序.

控制器负责通过AngularStrap $ popover服务设置范围和弹出框.控制器在范围上添加AngularStrap服务返回的popover对象,以便在链接函数中可用.它还添加了一个方法attachEventsToPopoverContent,该方法使用popover内容将mouseenter/mouseout事件附加到元素.

该指令的用法如下:

  <a title="Popover Title" data-placement="left" data-trigger="manual" data-content="{{someScopeObject}}" content-template="idOfTemplateInTemplateCache" hoverablePopover="">

Answer 4

在那里,我花了1天,最后得到解决方案.

<button uib-popover="{{dynamicPopover.content}}" 
    popover-trigger="outsideClick" popover-is-open="popoverIsOpen"
    ng-mouseenter="popoverIsOpen = !popoverIsOpen" 
    popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>

请检查 Plunkeer链接 仅检查动态弹出按钮代码

谢谢,

Answer 5

html

 <span class="icon-globe" id="visibilityFor" popover="hello how are you" 
       popover-placement="right" popover-trigger="mouseenter" 
       popover-popup-delay="50" viz>
</span>

指示

myAppModule.directive('viz', function ($rootScope,$timeout){
    return{

        restrict:"A",
        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);
            });

        }
    }
});

注意： - 不要忘记在jQuery.js 和 angular.js之后包含Angular-strap