相关疑难解决方法(0)

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

我有以下代码在我的模板文件中创建一个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

11
推荐指数
5
解决办法
3万
查看次数