Вход

Просмотр полной версии : Как отследить окончание нескольких асинхронных запросов


hopest
25.03.2014, 13:14
Есть директива типа loading


.directive('loadingContainer', function () {
return {
restrict: 'A',
scope: false,
link: function (scope, element, attrs) {
var loadingLayer = angular.element('<div class="loading">div>');
element.append(loadingLayer);
element.addClass('loading-container');
scope.$watch(attrs.loadingContainer, function (value) {
loadingLayer.toggleClass('ng-hide', !value);
});
}
};
})

//html
<div loading-container="vm.loading"></div>

//js

getData: function ($defer, params) {
$scope.vm.loading = true;
dataFactory.getTasksLevel0(params.page(), params.count(), $scope.vm.isLoadArchiv, $scope.vm.fltr_TaskType).success(function (data) {

dataFactory.tasksMakeAdditonalFields(data.Data.Tas ksLevel0, $sce);
params.total(data.Data.CountTasks);
$scope.vm.loading = false;

…..


Блокируется экран во время загрузки данных

Но вот если на странице несколько контролеров c асинхронной загрузкой данных, выходит мне надо зафиксировать роботу именно последнего исполнившегося запроса, как правильно организовать работу таких загрузок

FireVolkhov
25.03.2014, 15:01
Для множества запросов есть $q.all вот урок как пользоваться (https://egghead.io/lessons/angularjs-q-all)

в директиве что-то такое
scope.$watch(attrs.loading, function(newVal, oldVal, scope){
if(newVal){
if(newVal.$promise && !newVal.$resolved){
promise = newVal.$promise;
} else {
promise = newVal;
}

if(_.isFunction(promise.finally)){
startLoading();
promise.finally(endLoading);
}
}
});
и остается только собрать обещания всех контроллеров в одно обещание

nerv_
25.03.2014, 15:29
.directive('loadingContainer', function () {
На первый взгляд порнография :) Используй шаблоны (template || templateUrl).

Для множества запросов есть $q.all
Я бы сказал, что для "управления" асинхронностью используют обещания (http://docs.angularjs.org/api/ng/service/$q).