Question

我有一个简单而漂亮的工具提示代码（由其他人编写），它没有角度，效果很好，不像它。我一直在考虑用角度来使用它的最好方法。这里的代码是：

$(document).ready(function () {
    (function () {

    var moveLeft = 0;
    var moveDown = 0;
    $('a.popper').hover(function (e) {
        console.log("Here it is");
        var target = '#' + ($(this).attr('data-popbox'));

        $(target).show();
        //moveLeft = $(this).outerWidth();
        moveLeft = 15;
        //moveDown = ($(target).outerHeight() / 4);
        moveDown = -15;
    }, function () {
        var target = '#' + ($(this).attr('data-popbox'));
        $(target).hide();
    });

    $('a.popper').mousemove(function (e) {
        console.log('mousemove');
        var target = '#' + ($(this).attr('data-popbox'));

        leftD = e.pageX + parseInt(moveLeft);
        maxRight = leftD + $(target).outerWidth();
        windowLeft = $(window).width() - 40;
        windowRight = 0;
        maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);

        if (maxRight > windowLeft && maxLeft > windowRight) {
            leftD = maxLeft;
        }

        topD = e.pageY - parseInt(moveDown);
        maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
        windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
        maxTop = topD;
        windowTop = parseInt($(document).scrollTop());
        if (maxBottom > windowBottom) {
            topD = windowBottom - $(target).outerHeight() - 20;
        } else if (maxTop < windowTop) {
            topD = windowTop + 20;
        }

        $(target).css('top', topD).css('left', leftD);


    });

    })();
});

请记住，此代码运行良好，我在顶部包含了jQuery，如果我使用chrome控制台注入此代码，工具提示会出现在应有的位置。我很乐意问你们一个方法，这个代码可以用于角度，也许与服务/工厂一起使用。我能看到的唯一问题是据我所知，DOM逻辑不应该写在服务或工厂中（纠正我，我错了）。我正在考虑将它放在一个指令中，但我不确定这是否正确，以及我如何做到这一点。

我使用工具提示有几个视图，所以我不能把整个代码放在控制器本身。

Answer 1

感谢大家提供的建议。最后，我通过使用angular指令使其工作。我在你需要的时候与你分享，在github，链接：ng-tooltip。我很高兴收到你的消息，如果你有任何建议请与我分享。

这是指令本身：

.directive('ngTooltip', function () {
    return {
        link: function (scope, element, attribute) {
            //Our tooltip element
            var $target = angular.element('#tooltipcontent');
            var innerHtml = '';

            //Here you can customize what attributes you accept and how you show them on tooltip
            if (attribute.tooltipTitle) {
                innerHtml += '<h2>' + attribute.tooltipTitle + '</h2>';
            }

            if (attribute.tooltipBody) {
                innerHtml += '<p>' + attribute.tooltipBody + '</p>';
            }

            if (attribute.tooltipFooter) {
                innerHtml += '<p class="info">' + attribute.tooltipFooter + '</p>';
            }

            element.hover(function (e) {

                //Set inner content
                angular.element($target).html(innerHtml);

                //Show tooltip
                angular.element($target).show();

                //Distance X from the cursor
                moveLeft = 10;

                //Distance Y from the cursor
                moveDown = -10;
            }, function () {

                //Hide tooltip upon element mouseleaving
                angular.element($target).hide();
            });

            element.mousemove(function (e) {

                //Calculating positions
                leftD = e.pageX + parseInt(moveLeft);
                maxRight = leftD + angular.element($target).outerWidth();
                windowLeft = angular.element(window).width() - 40;
                windowRight = 0;
                maxLeft = e.pageX - (parseInt(moveLeft) + angular.element($target).outerWidth() + 20);

                if (maxRight > windowLeft && maxLeft > windowRight) {
                    leftD = maxLeft;
                }

                topD = e.pageY - parseInt(moveDown);
                maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
                windowBottom = parseInt(parseInt(angular.element(document).scrollTop()) + parseInt(angular.element(window).height()));
                maxTop = topD;
                windowTop = parseInt(angular.element(document).scrollTop());
                if (maxBottom > windowBottom) {
                    topD = windowBottom - angular.element($target).outerHeight() - 20;
                } else if (maxTop < windowTop) {
                    topD = windowTop + 20;
                }

                angular.element($target).css('top', topD).css('left', leftD);
            });
        }
    }
});

角度，服务/指令的工具提示

1 个答案: