1

我正在尝试使用指令将 google geomap 添加到 gridster 项目，但是在调整大小时我无法获得 gridster 的新宽度和高度。并且在重新加载页面时也会丢失高度和宽度。第一次加载时，我得到了正确的宽度和高度。

<li gridster-item="item" indexId='{{$index}}' ng-repeat="item in createdCharts track by $index" class='chart-container-grey' ng-init='chartIndex = $index' style='height:100%;' >
<div geomap item="item" style="width: 100%; height: 100%;" ></div>

</li>

myapp.directive('geomap', function() {
        return {
          scope: {
            item: "=" //gridster item
          },
          restrict: 'A',
          link: function(scope, $elm, $attr) {
            // Create the data table.
            var container = $elm.get(0);
            google.charts.load('upcoming', {'packages':['geomap']});
            google.charts.setOnLoadCallback(function() {

                var data = new google.visualization.arrayToDataTable([
                      ['Country', 'Popularity'],
                      ['Germany', 200],
                      ['United States', 300],
                      ['Brazil', 400],
                      ['Canada', 500],
                      ['France', 600],
                      ['RU', 700]
                    ]);

                // Set chart options

                console.dir($elm.context.offsetWidth);
                var options = {};
                    options['dataMode'] = 'regions';
                    options['width'] =$elm.parent()[0].offsetWidth+10+"px";
                    options['height'] =$elm.parent()[0].offsetHeight+10+"px";
                // Instantiate and draw our chart, passing in some options.

                var geomap = new google.visualization.GeoMap(container);

                geomap.draw(data, options);
            });

            scope.$on('gridster-resized', function(sizes, gridster) {
                 console.dir(sizes);
                 console.dir(gridster);
            })
          }
        }
    });
4

0 回答 0