AngularJs指令报告错误高度

Question

我创建了jsFiddle来描述我的问题。 http://jsfiddle.net/rzajac/MMud3/

指令本身是在这里：

内部本身

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(); 
    } 
    } 
}); 

的指令创建HTML和SVG元素。但是，当我试图获得创建的地图的高度，我得到了19而不是400.我做错了什么？

Answer 1

看起来<map>标签有一些默认样式会影响高度计算。

以下CSS就可以解决问题：

map { 
    display: block; 
} 

另一种方式来解决它是该指令的声明改变风格属性（A）。将<map>更改为<div map></div>，并将其指令restrict: 'E'更改为restrict: 'A'。