У меня есть угловая директива, загружающая 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);
});
}
};
Ну это не хорошо для меня, как моя нагрузка символ (угловой материал) замерзает, а затем исчезают в оставляет пустой браузер в течение нескольких секунд, прежде чем карта может отобразить. Для информации я использую нг скрытие на погрузочной DIV и нг-шоу на карте DIV, и это путь, я применяю его:
$scope.$on('initialised', function() {
$scope.$apply(function(){
$scope.mapLoaded = true;
});
})
Вы знаете способ, чтобы решить мою (1) и (2) вопрос? Или я должен искать другую библиотеку js для этого?
Спасибо
PS: вот моя карта директива (изображения является массивом с 20к входа в данный момент):
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();
}
}
})
1) угловая вряд ли является основной причиной ваших проблем. вероятно, это комбинация неправильного использования углового и наличие большого количества данных для загрузки в диаграмму. Вы можете делать много вещей в угловом, что будет «работать», но не так, как оно предназначалось для использования. Тем не менее, ваша задержка, скорее всего, исходит от amCharts. Вы пытались использовать профилирование времени из Chrome? –
Спасибо за ваш ответ. Я посмотрю на хром и дам вам знать. Как вы себе представляли, у меня не так много опыта с угловыми, но я уверен, что затянуть несколько тысяч svg в браузере не должно занимать 5 секунд. Вы знаете любой другой js librairy, который мог бы сделать трюк? – GrinnS
Кстати, как я злоупотребляю угловой здесь? – GrinnS