Как я могу получить ширину элемента с помощью AngularJS?

Question

Я понимаю, что могу использовать jQuery для получения ширины элемента, но мне любопытно; есть ли способ сделать это с помощью AngularJS?

Answer 1

Родной JS (#id):

document.getElementById(id).clientWidth; 

Родной JS (querySelector (класс, идентификатор, селектор CSS3)):

document.querySelectorAll(".class")[0].clientWidth; 

Подключив это в angular.element:

angular.element(document.getElementById(id)).clientWidth; 
angular.element(document.querySelectorAll(".class")[0]).clientWidth; 

Если вам нужно получить не округленные числа, используйте getBoundingClientRect.

angular.element(document.getElementById(id)).getBoundingClientRect(); 

Некоторые ресурсы по теме:

• http://msdn.microsoft.com/en-us/library/hh781509(VS.85).aspx
• https://developer.mozilla.org/en-US/docs/Web/API/Element.clientWidth
• https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

Если это плывет лодка с точки зрения синтаксиса и не-нужно подключить jQuery в микс, будьте осторожны с кросс-браузерным адом.

Answer 2

Если вы почесали свою голову, как я, со всеми этими предложениями, и они не работают, я обнаружил, что мне нужно установить тайм-аут. Я не уверен, почему, может быть, потому, что я использую атрибуты материального дизайна для своих div.

setTimeout(function(){ 
    var divsize = angular.element(document.getElementById('fun_div')).prop('offsetWidth'); 
    console.log('Width of fun_div: ' + divsize); 
    },50);