J’essaie d’afficher ou de masquer un indicateur de chargement sur un bouton lorsqu’une demande est occupée. Je le fais avec angular en changeant la variable $ scope.loading lorsqu’une demande est en cours de chargement ou lorsqu’elle est terminée.
$scope.login = function(){ $scope.loading = true; apiFactory.getToken() .success(function(data){ }) .error(function(error){ }) .finally(function(){ $timeout(function() { $scope.loading = false; }, 0); }); };
Dans le frontend:
Cela fonctionne bien, mais l’icône de chargement (rafraîchissement ionique) est affichée pendant environ 2 secondes, tandis que la variable $ scope est immédiatement mise à jour. J’ai essayé $ scope. $ Apply mais cela ne semble pas être ce qui ne va pas ici, la scope est mise à jour très bien et immédiatement après la requête. C’est juste l’icône qui ne répond pas assez rapidement.
Merci de m’aider à comprendre cela!
Essayez de supprimer ngAnimate si vous ne l’utilisez pas depuis votre page app config et index.html:
angular.module('myApp', [...'ngAnimate',...])
@Spock; Si vous avez toujours besoin de ngAnimate, laissez votre configuration intacte et ajoutez simplement le CSS suivant:
.ng-hide.ng-hide-animate{ display: none !important; }
Cela cachera l’icône animée juste après que votre condition soit remplie.
Comme vous pouvez le voir, nous mettons en cache .ng-hide-animate. C’est ce qui provoque le retard dans l’attente de la fin de l’animation. Vous pouvez append une animation à votre événement hide selon le nom de la classe au lieu de le masquer comme dans l’exemple ci-dessus.
J’ai eu le même problème et je l’ai contourné en utilisant ng-class avec le nom de la classe ‘hidden’ pour masquer l’élément au lieu d’utiliser ng-if ou ng-show / ng-hide.
J’ai trouvé des solutions ici , mais le meilleur pour moi était de remplacer le style pour la classe .ng-animate:
.ng-animate.no-animate { transition: 0s none; -webkit-transition: 0s none; animation: 0s none; -webkit-animation: 0s none; }
En html:
Ceci est un exemple: http://jsfiddle.net/9krLr/27/
J’espère vous aider.
J’étais confronté à un problème similaire, j’ai utilisé $scope.$evalAsync()
pour forcer la mise à jour de la liaison.
Il fonctionne comme un charme.
Évitez d’utiliser $scope.$apply
car il peut entrer en conflit avec une phase $ digest déjà en cours d’exécution.
if(selectedStatistics.length === 0 || selectedWorkgroups.length === 0){ ctrl.isSaveDisabled = true; $scope.$evalAsync(); } else{ ctrl.isSaveDisabled = false; $scope.$evalAsync(); }
dans la version angular 1.5.x ajoutant $scope.$apply()
après le changement de la condition faite le travail pour moi voici un exemple de fonction
$scope.addSample = function(PDF) { var validTypes ="application/pdf"; if(PDF.type == validTypes) { //checking if the type is Pdf and only pdf $scope.samplePDF= PDF.files[0]; $scope.validError = false; $scope.$apply(); } else { $scope.validError = true; $scope.samplePDF= null; $scope.$apply(); } }