Angularjs 角度：通过导致浏览器问题的指令加载大量数据

我有一个angular指令加载svg映射（使用amchart），在这里我添加了数千个svg圆。最后一切正常，但我的浏览器似乎很痛苦，我需要（1）优化我的加载和（2）显示一个加载符号，直到地图能够真正显示为止。 今天，我使用这种指令属性来了解何时加载指令：

        directive('initialisation',['$rootScope',function($rootScope) {
              return {
                   restrict: 'A',
                   link: function($scope) {
                    var to;
                    var listener = $scope.$watch(function() {
                       clearTimeout(to);
                       to = setTimeout(function () {
                          listener();
                          $rootScope.$broadcast('initialised');
                       }, 50);
                   });
               }
            };

这对我来说并不好，因为我的加载符号（角度材质）冻结，然后消失，在贴图可以渲染之前在空浏览器中停留几秒钟。有关信息，我在loading div上使用ng hide，在map div上使用ng show，这是我应用它的方式：

$scope.$on('initialised', function() {

         $scope.$apply(function(){
            $scope.mapLoaded = true;
         });
    })

你知道解决我（1）和（2）问题的方法吗？或者我应该找另一个js库来做这个

多谢各位

PS：这是我的map指令（images是一个目前有20k条目的数组）：

指令（'amChartsLanguage'，函数（）{ 返回{ 限制：'E'， 替换：正确， 模板：“”， 链接：函数（范围、元素、属性）{ var图=假； var initChart=函数（）{ if（chart）chart.destroy（）； var图像=[]； var legendData=[]； for（var i=0；i我们在页面上有更多的数据。设计和结构都很差。装载的时间太长，但之后的表现是伟大的。我们使用d3

1）角度并不是您问题的根本原因。这可能是滥用角度和将大量数据加载到图表中的组合。你可以在角度上做很多“有用”的事情，但不能按预期的方式使用。不过，您的延迟很可能来自amCharts。你试过使用Chrome的时间分析吗？谢谢你的回复。我会看看chrome，然后告诉你。正如您所想象的，我在angular方面没有太多经验，但我确信在浏览器中绘制几千个svg不应该花费5秒。你知道还有其他js库可以做到这一点吗？顺便问一下，我怎么会在这里误用angular？首先，你给link方法添加了太多功能，因此你的DOM编译需要填充图表的时间。如何做得更好，是添加所有DOM元素，然后在控制器中用数据更新它。链接方法应尽可能精简。20k数据点远远超出AmCharts maps library一次轻松处理所有数据点的能力，从性能角度来看，从用户体验的角度来看，可能不容易阅读。您可能需要考虑其他技术来管理，例如实现一个或不是同时显示它们，看看是否有帮助。

 directive('amChartsLanguage', function() {
          return {
            restrict: 'E',
            replace:true,
            template: '<div id="mapLanguage" style="height: 1000px; margin: 0 auto"> </div>',
            link: function(scope, element, attrs) {


                var chart = false;

                var initChart = function() {
                    if (chart) chart.destroy();
                    var images = [];
                    var legendData = [];
                    for(var i=0 ; i < scope.languageZeppelin.length ; i ++ ) {
                        images.push( {
                            "type": "circle",
                            "width": 7,
                            "height": 7,
                            "color": scope.languageZeppelin[i].color,
                            "longitude": scope.languageZeppelin[i].lon,
                            "latitude": scope.languageZeppelin[i].lat
                          } );

                    }

                    var legend = new AmCharts.AmLegend();
                    legend.width="10%";
                    legend.height="300";
                    legend.equalWidths = false;
                    legend.backgroundAlpha = 0.5;
                    legend.backgroundColor = "#FFFFFF";
                    legend.borderColor = "#ffffff";
                    legend.borderAlpha = 1;
                    legend.verticalGap = 10;
                    legend.top = 150;
                    legend.left = 70;
                    legend.position = "left";
                    legend.maxColumns = 1;
                    legend.data = scope.legend; 

                    // build map
                    chart = AmCharts.makeChart( "mapLanguage", {
                      "type": "map",
                      "areasSettings": {
                        "unlistedAreasColor": "#15A892",
                        "autoZoom": true,
                        "selectedColor": "#FFCC00",
                        "color": "#909090"
                      },
                      "dataProvider": {
                        "map": "worldLow",
                        "getAreasFromMap": true,
                        "images": images,
                        "zoomLevel": 1,
                        "zoomLongitude": 6,
                        "zoomLatitude": 11
                      },
                      "export": {
                        "enabled": false
                      }
                    } );

                    chart.addLegend(legend);

                    chart.validateNow(legend);


                };
                initChart();

            }
        }
        })