У меня проблема с заполнением страницы по частям. Существует произвольное количество категорий с произвольным количеством элементов. Код обычно похож на приведенный ниже (предупреждение, транспонировано).
$scope.getItems = function(key) {
$http.get('get-items?key=' + key)
.then(function(res) {
for (let item of res.data) {
$scope.categories[item.category].items.push(item);
}
});
}
let populateCategories = function() {
for (let key in $scope.categories) {
$scope.getItems(key);
}
}
$scope.getCategories = function(next) {
$http.get('get-categories')
.then(function(res) {
$scope.categories = res.data;
next();
});
$scope.getCategories(populateCategories);
}
Идея состоит в том, чтобы сначала получить, какие категории будут на странице, и отобразить их пустыми (но с иконкой занятости). После этого нажмите один раз на конечную точку для каждой категории и заполните ее результатами. Значок занятости отображается через ng-show и логическое значение, указывающее на размер элементов. 1 или более элементов = значок не занят, элементы должны отображаться.
Загрузка категорий более или менее работает. Однако их заселение не так свободно течет. Наблюдая за выводом на консоль, браузеру требуется время для рендеринга. Значок «занято» исчезает довольно быстро, но я не вижу предметы, пока их не будет готово.
Стоит отметить, (я думаю), я увидел эту проблему, когда я переместил HTML, который отображает каждый элемент из одного файла, шаблона и использовал ng-include, поскольку я использую его в двух разных местах. Конечно, это не было бы причиной, не так ли?
РЕДАКТИРОВАТЬ: Добавление HTML - упрощено
Пункт-template.html
<div class="row">
<div class="col-xs-2 col">
<img src="{{item.img}}">
</div>
<div class="col-xs-10 col">
<div>{{item.details}}</div>
</div>
</div>
list.html
<body>
<div class ="container-fluid">
<div class="row">
<div ng-repeat="(key, value) in categories">
<div>{{key}}</div>
<div ng-show="value.busy"">
<img ng-src="{{busy_image}}">
</div>
<div ng-repeat="item in value.items track by $index">
<!-- This in fact seems to be the culprit -->
<div ng-include="item-template.html">
</div>
</div>
</div>
</div>
</body>
Итак, если я просто вставлю содержимое template.html в list.html, ответ будет намного лучше. Глядя на эту проблему , кажется, что решение заключается в использовании службы кэширования. Я счастлив использовать что-то подобное, но мне все еще интересно, почему. Шаблон, который я использую, не маленький (166 строк), но я не могу себе представить, что он слишком тяжел на современном компьютере.