AngularJs指令报告错误高度 [英] AngularJs directive reports wrong height

问题描述

我已经建立了的jsfiddle来形容我的问题。 http://jsfiddle.net/rzajac/MMud3/

I have created the jsFiddle to describe my problem. 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.我在做什么错了？

The directive is creating html and SVG elements inside itself. But when I'm trying to get the height of created map i get 19 instead of 400. What am I doing wrong?

推荐答案

这似乎有一些默认样式的＆LT;地图＆GT; 正在影响高度标记计算。

It seems that there are some default styles for the <map> tag that are affecting the height calculation.

下面的CSS应该解决这个问题：

The following css should fix the problem:

map {
    display: block;
}

要解决这个问题的另一种方法是将指令申报改变风格的属性的（ A ）。更改＆LT;地图＆GT; 到＆LT; D​​IV地图＆GT;＆LT; / DIV＆GT; 和指示限制：'E'到限制：'A'

Another way to fix it is to change the directive declaration style to attribute (A). Change <map> to <div map></div> and on the directive restrict: 'E' to restrict: 'A'.

这篇关于AngularJs指令报告错误高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！