如何获取angularJs指令链接函数中元素标签的坐标

问题描述：

我在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; 


});

答

angular.element是jQuery的兼容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

如何获取angularJs指令链接函数中元素标签的坐标

相关推荐