jVectorMap 使用 Angularjs 渲染小答案

【问题标题】：jVectorMap renders small with AngularjsjVectorMap 使用 Angularjs 渲染小
【发布时间】：2016-09-16 08:15:42
【问题描述】：

这个问题与here 提出的问题非常相似。但是，有一些小的差异。当我最初将其放入站点时，我的地图已毫无问题地加载。我正在经历将 Angularjs 添加到站点的过程，并注意到“小”地图问题。我有一个非常简单的代码注入，它似乎触发了加载顺序。

奇怪的是：如果我调整浏览器的大小，我最终会到达一个按预期显示地图的地方（每个 div css）。这就是为什么我认为这是一个加载顺序问题，但不能通过 .resize() 调用解决。

不确定它是否相关，但这是由后端的 Express、Nodejs 网络服务器驱动的。地图在设置网络服务器且没有 Angularjs 代码注入的情况下按预期显示。

任何帮助将不胜感激。

编辑：下面的代码。请注意，如果没有 ng-include（它只是一个 css 文件列表），它会正常加载。

<html ng-app class="no-js lt-ie9 lt-ie8 lt-ie7">
    <head ng-include="'style.html'">
        <script src="vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="js/angular.min.js"></script>
    </head>
    <body>
        <div id="main" class="container">
            <div id="content" class="content bg-base section">
                <div id="map" class="span10"></div>
            </div>
        </div>
    </body>
    <script>
        $(function(){ $('#map').vectorMap(
        {
            map: 'world_mill_en', 
            backgroundColor: 'transparent',
            regionsSelectable: true,
            regionsSelectableOne: true,
            regionStyle: 
            {
                selected: { fill: 'Red' }
            }
        }); 
        });
    </script>
</html>

【问题讨论】：

您是否在指令中初始化插件？如果不是，你应该是。请贴代码

标签： javascript jquery css angularjs jvectormap

【解决方案1】：

我非常不愿意用指令加载我的地图，但最终我还是屈服了。对于那些遇到同样问题的人，请参阅下面的代码： HTML 看起来像这样：

<div class="item active">
    <div countrymap class="span10"></div> 
    <div class="carousel-caption">
        <h3 style="color:red" ><strong>{{countryName}}</strong><h3> 
    </div>
</div>

指令看起来像这样：

app.directive('countrymap', [function() 
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).width('auto'),
            $(element).height(500),
            scope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                { 
                    $(element).vectorMap
                    ({
                        map: newCountry,
                        backgroundColor: 'transparent',
                        regionsSelectable: true,
                        regionsSelectableOne: true,
                        zoomButtons : false
                    });
                }, 20);
            })
        }
    };
}]);

【讨论】：

您好，我尝试在我的项目中使用此代码，但它返回一个未捕获的类型 errpr vectorMap is not a function
@bleykFaust 您是否在 html 中包含了 jvectormap javascript？

【解决方案2】：

下面的答案对我有用，在我用以下方式包装链接对象后：

angular.element(document).ready(function () {}

参见下面的示例

 .directive('countrymap', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            angular.element(document).ready(function () {
                angular.element(element).width('auto');
                angular.element(element).height(500);
                scope.$watch("countryMap", function (newCountry, oldCountry) {
                    setTimeout(function () {
                        angular.element(element).vectorMap
                        ({
                            map: newCountry,
                            backgroundColor: 'transparent',
                            regionStyle: {
                                initial: {
                                    fill: '#000000',
                                    opacity: '.9'
                                },
                                hover: {
                                    opacity: '.5'
                                }
                            },
                            regionsSelectable: true,
                            regionsSelectableOne: true,
                            zoomButtons: true
                        });
                    }, 20);
                });
            });
        }
    };
}]);

【讨论】：