Я использую $http
сервис AngularJS, чтобы сделать запрос Ajax.
Как можно отобразить вращающийся GIF (или другой тип индикатора занятости) во время выполнения Ajax-запроса?
Я не вижу ничего подобного ajaxstartevent
в документации AngularJS.
angularjs
ajax
busyindicator
Аджай Бенивал
источник
источник
Ответы:
Вот
текущиепрошлые заклинания AngularJS:Вот и все остальное (HTML / CSS) .... используя
переключить это. ПРИМЕЧАНИЕ: вышеупомянутое используется в угловом модуле в начале сообщения
источник
angular.element('#mydiv').show()
вместо$('#mydiv').show()
ng-class
директиву вместо использования JQuery для показа и скрытия элементов?Это действительно зависит от вашего конкретного случая использования, но простой способ будет следовать такой схеме:
А затем отреагируйте на это в вашем шаблоне:
источник
loading
как целое число$scope.loading = 0;
, когда вы начинаете запрос$scope.loading++;
, а когда он заканчивается, вы делаете$scope.loading--;
. И нечего менять в шаблоне. Таким образом, счетчик отображается, когда выполняется хотя бы один запрос, а остальное время$scope.loading = false
как обратный вызов, так и обратный вызов, состоит в том, чтобы поместить его в.finally()
. Это будет выглядеть так:mySvc.get().then(success, fail).finally(function() { $scope.loading = false; });
Вот версия с использованием
directive
иng-hide
.Это покажет загрузчик во всех звонках через
$http
сервис angular .В шаблоне:
<div class="loader" data-loading></div>
директива:
используя
ng-hide
класс элемента, вы можете избежать jquery.Настроить: добавить
interceptor
Если вы создаете загрузочный перехватчик, вы можете показать / скрыть загрузчик в зависимости от условия.
директива:
перехватчик:
spinner
когдаresponse.background === true;
request
и / илиresponse
установить$rootScope.$broadcast("loader_show");
или$rootScope.$broadcast("loader_hide");
больше информации о написании перехватчика
источник
$http
любой сервис.Если вы используете ngResource, атрибут $ resolved объекта полезен для загрузчиков:
Для ресурса следующим образом:
Вы можете связать загрузчик с атрибутом $ resolved объекта ресурса:
источник
https://github.com/wongatech/angular-http-loader - хороший проект для этого.
Пример здесь http://wongatech.github.io/angular-http-loader/
Код ниже показывает пример шаблона / loader.tpl.html, когда происходит запрос.
источник
Просто обнаружил
angular-busy
директиву, которая показывает маленький загрузчик в зависимости от какого-то асинхронного вызова.Например, если вам нужно сделать
GET
, сослаться на обещание в вашем$scope
,и назовите это так:
Вот это GitHub.
Вы также можете установить его, используя
bower
(не забудьте обновить зависимости вашего проекта):источник
Если вы упаковываете свои вызовы API в сервис / фабрику, то вы можете отследить счетчик загрузки там (за ответ и превосходное одновременное предложение @JMaylin) и ссылаться на счетчик загрузки через директиву. Или любая их комбинация.
API WRAPPER
SPINNER DIRECTIVE
ИСПОЛЬЗОВАНИЕ
источник
Для загрузок и модальных страниц самым простым способом является использование
ng-show
директивы и использование одной из переменных данных области. Что-то вроде:Здесь пока
someObject
не определено, покажет счетчик. Как только служба вернется с данными иsomeObject
заполнится, счетчик вернется в свое скрытое состояние.источник
Я думаю, это самый простой способ добавить спиннер:
Вы можете использовать ng-show с тегом div любого из этих прекрасных блесен http://tobiasahlin.com/spinkit/ {{Это не моя страница}}
и тогда вы можете использовать этот вид логики
источник
Добавьте эту CSS:
И просто в ваш угловой добавить:
$ rootScope.loading = false; $ rootScope.loading = true; -> когда заканчивается $ http.get.
источник
Поделиться моей версией отличного ответа от @bulltorious, обновленной для более новых угловых сборок (я использовал версию 1.5.8 с этим кодом), а также включил идею @ JMaylin об использовании счетчика, чтобы быть устойчивым к нескольким одновременным запросам, и возможность пропустить показ анимации для запросов, занимающих менее минимального количества миллисекунд:
источник
Вы можете использовать угловой перехватчик для управления запросами http
https://stackoverflow.com/a/49632155/4976786
источник
Простой способ без перехватчиков или JQuery
Это простой способ показать спиннер, который не требует сторонней библиотеки, перехватчиков или jQuery.
В контроллере установите и сбросьте флаг.
В HTML используйте флаг:
vm.starting
Флаг устанавливается ,true
когда XHR начинается и очищается , когда XHR не завершится.источник
Это хорошо работает для меня:
HTML:
Угловой:
Пока обещание, возвращаемое из $ http, еще не выполнено, ng-show оценит его как «правдивое». Это автоматически обновляется, как только обещание будет выполнено ... это именно то, что мы хотим.
источник
Используется следующий перехватчик для отображения строки загрузки по запросу http
источник
источник
создать директиву с этим кодом:
источник
Другое решение для отображения загрузки между различными изменениями URL:
А затем в разметке просто переключите спиннер с помощью
ng-show="loading"
.Если вы хотите отобразить его в запросах ajax, просто добавьте,
$scope.loading++
когда запрос начинается и когда он заканчивается, добавьте$scope.loading--
.источник
Вы можете попробовать что-то вроде этого:
Создать директиву:
Затем вы добавляете что-то вроде этого в mainCtrl
И HTML может выглядеть так:
источник
Следующий способ будет принимать к сведению все запросы и скрывать только после выполнения всех запросов:
источник
Поскольку функциональность position: fixed недавно изменилась, мне было трудно показать gif-загрузчик над всеми элементами, поэтому мне пришлось использовать встроенный в Angular jQuery .
Html
Css
контроллер
Надеюсь это поможет :)
источник
Все ответы являются либо сложными, либо должны устанавливать некоторые переменные для каждого запроса, что является очень неправильной практикой, если мы знаем концепцию СУХОЙ. Вот простой пример перехватчика, я установил мышь на ожидание при запуске ajax и установил его в автоматический режим при завершении ajax.
Код должен быть добавлен в конфиг приложения
app.config
. Я показал, как изменить мышь при загрузке, но там можно показать / скрыть любой контент загрузчика, или добавить, удалить некоторые классы CSS, которые показывают загрузчик.Перехватчик будет запускаться при каждом вызове ajax, поэтому нет необходимости создавать специальные логические переменные ($ scope.loading = true / false и т. Д.) При каждом вызове http.
источник
Вот моя реализация, такая же простая, как ng-show и счетчик запросов.
Он использует новый сервис для всех запросов к $ http:
И тогда вы можете использовать базу загрузчика по количеству текущих вызовов:
источник
если вы хотите показывать загрузчик для каждого вызова http-запроса, то вы можете использовать угловой перехватчик для управления вызовами http-запроса,
вот пример кода
источник
Просто используйте нг-шоу и логическое значение
Не нужно использовать директиву, не нужно усложнять.
Вот код, который нужно поместить рядом с кнопкой отправки или где вы хотите, чтобы спиннер был:
И тогда в вашем контроллере:
источник
Вот мое решение, которое я чувствую намного легче, чем другие, размещенные здесь. Не уверен, насколько это "красиво", но это решило все мои проблемы
У меня есть стиль CSS под названием «загрузка»
HTML-код для загрузки div может быть любым, но я использовал некоторые значки FontAwesome и метод spin там:
На элементах, которые вы хотите скрыть, просто напишите это:
и в функции я просто установить это под нагрузкой.
Я использую SignalR, поэтому в функции hubProxy.client.allLocks (когда она будет проходить через блокировки), я просто положил
Это также скрывает {{someField}} при загрузке страницы, так как я устанавливаю класс загрузки под нагрузкой, а AngularJS удаляет его впоследствии.
источник