使用创建Hoverable酥料饼的角度-UI-引导

Question

我已经在我的模板文件中创建一个酥料饼下面的代码：

<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”，因为它是不确定的。请指出我做错了什么，以及如何显示/隐藏指令中的角度ui弹出窗口。我正在使用角度ui bootstrap JS文件。

Answer 1

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

Answer 2

我不知道这是否与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。它缺乏造型，但它应该展示它的工作方式。

Answer 3

我觉得Cosmin拥有可靠的弹出窗口，但它似乎使用Twitter Bootstrap弹出窗口方法。这个想法是让这个可移植的popover只能用于AngularJS和AngularJS的Bootstrap包装，它们是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的元素并附加mouseenter/mouseout事件处理程序。

控制器负责通过AngularStrap $ popover服务设置范围和弹出窗口本身。控制器在作用域中添加AngularStrap服务返回的弹出对象，以便在链接函数中可用。它还添加了一个方法attachEventsToPopoverContent，它将mouseenter/mouseout事件附加到带有弹出内容的元素。

这个指令的使用方法是这样的：

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

Answer 4

了该功能角UI引导0.14.0添加并记录here。禁用触发器并使用popover-is-open属性手动指定打开/关闭状态。

Answer 5

我在0.13.X中获得的是将元素设置为<button>，然后设置popover-trigger =“focus”。然后设置按钮的样式，然后通过单击按钮来聚焦按钮。你可以悬停在弹出窗口中，点击一个链接，我需要做的就是。

Answer 6

那里我花了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 Link 仅选中动态酥料饼的按钮代码

感谢，

Answer 7

演示：

https://jsbin.com/fuwarekeza/1/edit?html,output

指令：

myAppModule.directive('popoverHoverable', ['$timeout', '$document', function ($timeout, $document) { 
    return { 
     restrict: 'A', 
     scope: { 
      popoverHoverable: '=', 
      popoverIsOpen: '=' 
     }, 
     link: function(scope, element, attrs) { 
      scope.insidePopover = false; 

      scope.$watch('insidePopover', function (insidePopover) { 
       togglePopover(insidePopover); 
      }) 

      scope.$watch('popoverIsOpen', function (popoverIsOpen) { 
       scope.insidePopover = popoverIsOpen; 
      }) 

      function togglePopover (isInsidePopover) { 
       $timeout.cancel(togglePopover.$timer); 
       togglePopover.$timer = $timeout(function() { 
        if (isInsidePopover) { 
         showPopover(); 
        } else { 
         hidePopover(); 
        } 
       }, 100) 
      } 

      function showPopover() { 
       if (scope.popoverIsOpen) { 
        return; 
       } 

       $(element[0]).click(); 
      } 

      function hidePopover() { 
       scope.popoverIsOpen = false; 
      } 

      $(document).bind('mouseover', function (e) { 
       var target = e.target; 
       if (inside(target)) { 
        scope.insidePopover = true; 
        scope.$digest(); 
       } 
      }) 

      $(document).bind('mouseout', function (e) { 
       var target = e.target; 
       if (inside(target)) { 
        scope.insidePopover = false; 
        scope.$digest(); 
       } 
      }) 

      scope.$on('$destroy', function() { 
       $(document).unbind('mouseenter'); 
       $(document).unbind('mouseout'); 
      }) 

      function inside (target) { 
       return insideTrigger(target) || insidePopover(target); 
      } 

      function insideTrigger (target) { 
       return element[0].contains(target); 
      } 

      function insidePopover (target) { 
       var isIn = false; 
       var popovers = $('.popover-inner'); 
       for (var i = 0, len = popovers.length; i < len; i++) { 
        if (popovers[i].contains(target)) { 
         isIn = true; 
         break; 
        } 
       } 
       return isIn; 
      } 
     } 
    } 
}]); 

HTML：

<span class="icon-globe visibility" 
     id="visibilityFor{{post.metaData.assetId}}" 
     popover="{{post.visibilityListStr}}" 
     popover-is-open="{{post.$open}}" 
     popover-trigger="click" 
     popover-hoverable="true" 
     visibility> 
</span> 

Answer 8

我已经在一个非常干净的方式解决了这个问题，并认为分享：正在创建不如UIB-酥料饼的孩子 .popover 这样的想法是包裹uib-popover与父母和控制显示&隐藏在父母的悬停。 。popover和uib-popover是这个父项的子项 ，所以刚好设置popover-trigger = none，并且你有你想要的东西。

我创建了一个普拉克例如： https://plnkr.co/edit/6vzrrH1KUyQeLHDz1hWp?p=preview

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

你必须把触发器在单引号，因为，原因：

<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-default">Mouseenter</button> 

Answer 10

最简单的方法使用UIB-酥料饼 看看下面的工作实例有一个鼠标事件！ 你不必有UIB-标签集，我面临的问题与UIB-标签集等补充例子。

<uib-tabset> 
     <uib-tab> 
     <uib-tab-heading> 
      Tab 1 
     </uib-tab-heading> 
     <div> 

      <span ng-mouseover="popoverIsOpen = true" 
       ng-mouseleave="popoverIsOpen = false"> 
      <button uib-popover-template="'includeFile.html'" 
        popover-trigger="outsideClick" 
        popover-is-open="popoverIsOpen" 
        popover-placement="right" 
        type="button" class="btn btn-default"> 
       Dynamic Popover 
      </button> 
     </span> 

     </div> 
     <p> tab 1</p> 
     </uib-tab> 
     <uib-tab> 
     <uib-tab-heading> 
      Tab 2 
     </uib-tab-heading> 

     <p> tab 2</p> 
     </uib-tab> 
    </uib-tabset> 

模板：includeFile.html

<div> 
    <span>This is for tesitng</span> 
    <strong> <a href="www.google.com">www.google.com</a></strong> 

</div>