如何查找传递给指令'的元素的高度和宽度；Angularjs中的s链接函数

我找不到传递给“link”函数的元素的高度或宽度。我需要它，因为我想计算鼠标单击附加到元素的图像的位置。offsetHeight、offsetWidth、clientHeight和clientWidth都未定义，x和y的位置也未定义。getBoundingClientRect引发“非函数”错误。在模板中设置高度和宽度属性不会更改任何内容

下面是一个简单的说明问题的指令：

---

问题是我没有从正确的元素中获得高度和宽度。在进入link函数时，我向元素添加了一个svg标记。svg标记具有宽度和高度，在该标记上使用getClientBoundingRect是有效的。但是，元素[0]是一个来自指令“template:”定义（空div）的标记。因此，模板中以指令开头的元素如下所示：

>...<div></div><svg>...</svg><

><

---

将svg标记附加到元素会导致显示svg标记的字符串文字表示形式，我可能会对此进行修复，但也可以简单地选择传递到链接函数的元素的svg子元素

原始DOM元素是

元素[0]

。向link函数显示的

元素

参数是DOM元素的参数。我在Angular之前加载jQuery，因此我可以预期包装器是jQuery包装器，对吗？如果jQuery可用，请使用jQuery函数。如果jQuery不可用，则框架将委托给AngularJS的jQuery内置子集，称为“jQuery lite”，或者框架可能尚未在此时呈现所有DOM。添加以查看。如果您想要位置，我想您应该获得上/左属性。

//NEW
var ngnDirectives = angular.module('ngnDirectives');

ngnDirectives.directive('positionTest', function() {

    function link(scope, element, attrs) {


    var bcr = element[0].getBoundingClientRect();
    console.log("bcr before css. left, right, top, bottom: " + bcr.left + ", " + bcr.right + ", " + bcr.top + ", " + bcr.bottom); 


    element.css("height", 217);
    element.css("width", 217);


    bcr = element[0].getBoundingClientRect();
    console.log("bcr after css. left, right, top, bottom: " + bcr.left + ", " + bcr.right + ", " + bcr.top + ", " + bcr.bottom); 


    console.log("offsetWidth, offsetHeight: " + element[0].offsetWidth + ", " + element[0].offsetHeight);
    console.log("clientWidth, clientHeight: " + element[0].clientWidth + ", " + element[0].clientHeight);

    }
    return {
        scope: {},
        restrict: 'E',
        template: '<div></div>',
        link: link

    };
});

>...<div></div><svg>...</svg><