采用了棱角分明的UI，引导创建Hoverable酥料饼 [英] Create Hoverable popover using angular-ui-bootstrap

问题描述

我有以下的code在我的模板文件创建酥料饼：

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.

下面是code：

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酥料饼。我采用了棱角分明的UI引导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.

推荐答案

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

I don't know if this is relevant to the OP anymore, but I've had the same problem and fortunately I managed to solve it.

未定义的错误

第一件事，第一，你越来越可能（至少在我的情况下），因为你正在使用的开发版本中未定义错误UI的引导。在我来说，我试图绑定 element.popover 的时候得到这个错误。添加库缩小的版本后的错误就走开了。

First thing first, the undefined error you are getting might be (at least in my case) because you are using the development version of ui-bootstrap. In my case I got this error when trying to bind element.popover. After adding the minified version of the library the error went away.

保持酥料饼开盘旋在它时

要做到这一点，我已经创建了一个自定义的指令，它使用了酥料饼的从 UI-引导库

To do this I have created a custom directive that makes use of the popover from the ui-bootstrap library.

指令

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模板，并将其馈送到控制。

This directive also accepts a custom template for the popover, so you are not limited to just title and some text in it. You can create your own html template and feed it to the control.

用法

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

希望这有助于别人的未来：）

Hopes this helps someone else in the future :)

修改

根据要求，这里是一个小提琴链接。它缺乏的造型，但它应该表现出它的工作方式。

As requested, here is a Fiddle link. It lacks the styling, but it should demonstrate the way it works.

这篇关于采用了棱角分明的UI，引导创建Hoverable酥料饼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！