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

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); 
      }); 
     } 
    } 
});