在AngularJS中获取没有JQuery的HTML元素高度

Question

我熟悉AngularJS.我尽力做到"纯洁".出于这个原因,我试图避免包含jQuery.但是,我在挑战HTML元素的高度时遇到了挑战.目前,我正在尝试以下方法:

angular.module('myModule', [])
  .directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            console.log(element.css('height'));
        }
    };
  })
;

但是,执行此代码时,会将空行写入控制台.我正在尝试显示元素的高度.有没有办法在不使用jQuery的情况下在AngularJS中执行此操作？

谢谢!

Answer 1

如果您使用以下情况,它似乎正常工作并给出相同的结果:

element.style.height

由于没有在元素上设置内联样式或CSS高度,因此会显示一个空白行.您可以直接获取HTML元素高度,而不是依赖于样式.

console.log(element[0].offsetHeight);

http://plnkr.co/edit/03YWwjBjYpid4fVmDxlM?p=preview

如何检索HTML元素的实际宽度和高度？

Answer 2

由angular提供的元素周围的小包装器允许您询问属性,因此:

element.prop('offsetHeight');

工作正常,请参阅:http://plnkr.co/edit/pFHySDo7hjEcMKCqGuiV？p = preview