AngularJs 指令报告错误的高度答案

【问题标题】：AngularJs directive reports wrong heightAngularJs 指令报告错误的高度
【发布时间】：2013-02-13 14:21:13
【问题描述】：

我创建了 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。我做错了什么？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

似乎<map> 标记的一些默认样式会影响高度计算。

下面的 css 应该可以解决这个问题：

map {
    display: block;
}

另一种解决方法是将指令声明样式更改为 attribute (A)。将<map> 更改为<div map></div>，并将指令restrict: 'E' 更改为restrict: 'A'。

【讨论】：