我有以下代码在我的模板文件中创建一个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>
Run Code Online (Sandbox Code Playgroud)
我在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 …Run Code Online (Sandbox Code Playgroud) angularjs angular-ui angularjs-directive angular-ui-bootstrap