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