角度、サービス/指示のツールチップ

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