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

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的包括顶部，如果我注入的代码与镀铬控制台，出现提示它应该。我恳请你们提供一个方法，这个代码可以和角度一起使用，也许有服务/工厂。我所能看到的唯一问题就是据我所知，DOM逻辑不应该写在服务或工厂中（纠正错误）。我正在考虑将其置于指令中，但我不确定这是否正确，以及我该怎么做。

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

Answer 1

感谢大家的建议如何做。最后，我通过使用角度指令来完成工作。我与你分享，以防万一你需要它，在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); 
      }); 
     } 
    } 
});