Подсказка для углового, сервис/директива

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, link: 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); 
      }); 
     } 
    } 
});