La directive AngularJs signale une mauvaise hauteur

Question

J'ai créé jsFiddle pour décrire mon problème. http://jsfiddle.net/rzajac/MMud3/

La directive elle-même est ici:

var myApp = angular.module('myApp', []); 

myApp.directive('map', function(){ 
    return { 
    restrict: 'E', 
    scope: {}, 
    link: function(scope, elem, attrs) 
    { 
     elem 
     .height(400) 
     .width(600) 
     .vectorMap({ 
      map: 'usa_en', 
      backgroundColor: null, 
      color: '#ffffff', 
      hoverColor: '#999999', 
      selectedColor: '#666666', 
      enableZoom: false, 
      showTooltip: true 
     }); 

     document.getElementById('mapHeight').value = elem.height(); 
    } 
    } 
}); 

La directive introduit des éléments HTML et SVG à l'intérieur lui-même. Mais quand j'essaie d'obtenir la hauteur de la carte créée, j'obtiens 19 au lieu de 400. Que fais-je de mal?

Answer 1

Il semble qu'il existe des styles par défaut pour la balise <map> qui affectent le calcul de la hauteur.

Le suivant doit fixer css le problème:

map { 
    display: block; 
} 

Une autre façon de résoudre ce problème est de changer le style de déclaration de directive à attribut (A). Remplacez <map> par <div map></div> et par la directive restrict: 'E' par restrict: 'A'.