0

問題を説明するために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要素を作成しています。しかし、作成したマップの高さを取得しようとすると、400ではなく19になります。何が間違っているのでしょうか。

4

1 に答える 1

3

<map>高さの計算に影響を与えるタグのデフォルト スタイルがいくつかあるようです。

次の css で問題が解決するはずです。

map {
    display: block;
}

これを修正する別の方法は、ディレクティブの宣言スタイルを属性( A) に変更することです。と のディレクティブをに変更<map>します。<div map></div>restrict: 'E'restrict: 'A'

于 2013-02-13T15:10:42.763 に答える