web-dev-qa-db-fra.com

Obtenir la taille d'élément HTML sans JQuery dans AngularJS

Je me familiarise avec AngularJS. J'essaie d'être aussi "pur" que possible. Pour cette raison, j'essaie d'éviter d'inclure jQuery. Cependant, je ne parviens pas à obtenir la hauteur d'un élément HTML. Actuellement, j'essaye ce qui suit:

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

Cependant, lorsque ce code est exécuté, une ligne vide est écrite sur la console. J'essaie d'afficher la hauteur de l'élément. Y a-t-il un moyen de faire cela dans AngularJS sans utiliser jQuery?

Merci!

cssangularjs
47
user3284007

Il semble que cela fonctionne correctement et donne le même résultat si vous utilisez:

element.style.height

Comme aucun style en ligne ou hauteur CSS n'est défini sur l'élément, une ligne vide est affichée. Au lieu de compter sur le style, vous pouvez obtenir directement la hauteur des éléments HTML.

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

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

Comment puis-je récupérer la hauteur et la largeur réelles d'un élément HTML?

61
shaunhusain

Le petit élément wrapper around fourni par angular vous permet de demander des propriétés, donc:

element.prop('offsetHeight');

Cela fonctionnera bien, voir: http://plnkr.co/edit/pFHySDo7hjEcMKCqGuiV?p=preview

23
IxDay