2014-02-20 108 views
46

我對AngularJS很熟悉。我試圖儘可能地「純」。出於這個原因,我試圖避免包含jQuery。不過,我有一個挑戰獲得HTML元素的高度。目前,我正在嘗試以下操作:在AngularJS中獲取不帶JQuery的HTML元素高度

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

但是,當執行此代碼時,會將空行寫入控制檯。我試圖顯示元素的高度。有沒有辦法在AngularJS中做到這一點,而不使用jQuery?

謝謝!

回答

60

看來,這是正常工作,並給出瞭如果使用相同的結果:

element.style.height 

由於沒有內嵌樣式或CSS高度設置一個空行顯示的元素。不要依賴風格,你可以直接獲取HTML元素的高度。

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

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

How do I retrieve an HTML element's actual width and height?

+4

這對我有用!我試圖從我的應用程序中刪除jQuery,它使用'angular.element('#header')。height()'。你可以用'angular.element(document.querySelector('#header'))[0] .offsetHeight'做同樣的事情。謝謝! –

+2

你可能會也可能不關心這個,但是對於一個ID來說,document.getElementById在性能方面比querySelector更好。 –

+0

我無法重現它顯示。我遇到的問題是使用ng-repeat呈現的元素和靜態元素具有不同的高度。原因可以不一樣嗎?加載時間?我的意思是說,需要從Javascript獲取內容來設置DOM,而另一個則很明顯。如果情況如此,是否有一些解決方法? – Eugene