使用angular-ui-bootstrap创建Hoverable 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/并尝试创建一个指令viz。“可见性”用于此目的。
代码如下：
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‘，因为它是未定义的。请指出我做错了什么，以及如何在指令中显示/隐藏angular ui弹出窗口。我使用的是angular ui bootstrap JS文件。
回答 11
Stack Overflow用户
发布于 2016-08-24 17:49:42
我已经以一种非常干净的方式解决了这个问题，并想分享一下：
.popover不是作为uib-popover的子级创建的，所以这个想法是将uib-popover与父级封装在一起，并控制悬停父级时的显示和隐藏。
.popover和uib-popover都是这个父类的子类，所以只需设置popover-trigger=none就可以了。
我创建了一个plunk example
<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>好好享受吧。
Stack Overflow用户
发布于 2014-06-12 17:09:37
我不知道这是否与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',
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>希望这对将来的其他人有所帮助:)
编辑
按照要求，这里有一个Fiddle link。它缺少样式，但它应该演示它的工作方式。
Stack Overflow用户
发布于 2016-03-05 14:03:41
在那里我花了一天的时间，最终得到了解决方案。
<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 Link仅检查动态弹出窗口按钮代码
谢谢,
https://stackoverflow.com/questions/20267967
复制相似问题
腾讯云开发者
