ang-ng-if ou ng-show répond lentement (délai de 2 secondes?)

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(); } }