2014-10-31 2 views
-1

AngularJS에서 지시 도구를 통해 도구 팁을 구현하지만 요소 좌표를 가져올 수 없습니다. 내 툴팁이 표시되면 해당 위치의 좌표를 가져오고 위치에 따라 을 표시하려고합니다.angularJs 지시문의 링크 함수 내부에서 요소 태그의 좌표를 얻는 방법

'use strict'; 
var utility = angular.module("utility", []); 

utility.directive("tooltip", function() { 

    var directive = {}; 

    directive.restrict = 'A'; 
    directive.transclude = true; 

    directive.link = function ($scope, element, attributes) { 
     element.html("This is the new content: "); 
     element.bind('mouseenter', createDiv); 
     element.bind('mouseleave', destroyDiv); 


     function createDiv() { 

      //need the coordinate of the pointer to display div on hover of attribute. 

      var divTag = document.createElement("div"); 
      var toolTipHtml; 
      divTag.id = "divToolTip"; 
      divTag.setAttribute("align", "center"); 
      //divTag.style.border = "1px solid #ccc"; 
      divTag.style.zIndex = "999"; 
      divTag.style.position = "absolute" 
      divTag.style.width = "200px"; 
      divTag.style.height = "115px"; 
      toolTipHtml = "<div style=\" opacity:0.8; border-bottom:15px solid #000; border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0; \"></div>" 
      toolTipHtml += "<div style = \"background-color:black; opacity:0.8; border: 1px solid #F11; width:98%; height:95%; -webkit-border-radius:20px; position:relative;\">"; 
      toolTipHtml += "<div style=\" width:96%; height:10px; margin-top:15px;\"> <div style=\" float:left; width:90%; height:9px;\"></div> <div style=\" float:left; width:10%\"> <img src=\"./img/close.png\" alt=\"HTML Tutorial\"/> </div> </div>"; 
      toolTipHtml += "<div style=\"float:left; width:150px;\"/> " + $scope.toolTipData.message + "</div>"; 
      toolTipHtml += "</div>"; 

      divTag.innerHTML = toolTipHtml; 

      element.append(divTag); 
     } 

     function destroyDiv() { 
      var divTag = document.getElementById("divToolTip"); 
      divTag.remove(); 
     } 
    } 

    directive.scope = true; 

    return directive; 


}); 

답변

0

angular.elementjQuery를 호환 API입니다.

jQuery 라이브러리가 페이지에 포함되어 있으면 실제로 jQuery를 사용하지만 이는 종속성이 아닙니다.

jQuery의 모든 이벤트 핸들러의 첫 번째 인수가 이벤트 객체이므로이 인수를 이벤트 핸들러 함수에 전달해야 좌표를 액세스 할 수 있습니다.

function createDiv(event){ 

    var pageX = event.pageX, 
     pageY = event.pageY; 

     /* your existing code */ 
} 

또한 새 요소를 만들고 조작 할 때 사용할 수 있습니다.

var divTag = angular.element('<div>'); 
divTag.css({zIndex:999, position:'absolute', width: 200, height: 115}); 

참조 : angular.element docs

관련 문제