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'。