angulaire 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 fais cela avec angular en modifiant la variable $ scope.loading lorsqu'une requête 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:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in 
<span ng-if="loading" class="ion-refreshing"></span>
</button>

Cela fonctionne bien, mais l'icône de chargement (rafraîchissement des ions) est affichée pendant environ 2 secondes, tandis que la variable $ scope est mise à jour immédiatement. J'ai essayé $ scope. $ Apply mais cela ne semble pas être ce qui ne va pas ici, la portée est mise à jour très bien et immédiatement après la demande. C'est juste l'icône qui ne répond pas assez rapidement.

Merci de m'avoir aidé à comprendre cela!

Essayez de supprimer ngAnimate si vous ne l'utilisez pas à partir de la configuration de votre application et de la page index.html:

angular.module('myApp', [...'ngAnimate',...])

@Spock; si vous avez toujours besoin d'utiliser ngAnimate, laissez la configuration de votre application intacte et ajoutez simplement le CSS suivant:

.ng-hide.ng-hide-animate{
     display: none !important;
}

Cela masquera l'icône animée juste après que votre condition soit remplie.

Comme vous pouvez le voir, nous définissons .ng-hide-animate sur hidden. C'est ce qui provoque le retard pendant qu'il attend la fin de l'animation. Vous pouvez ajouter une animation à votre événement de masquage comme l'indique 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 classe «hidden» pour masquer l'élément au lieu d'utiliser ng-if ou ng-show / ng-hide.

J'ai trouvé quelques solutions ici , mais la meilleure pour moi était de remplacer le style de la classe .ng-animate:

.ng-animate.no-animate {
    transition: 0s none;
    -webkit-transition: 0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
}

En html:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
    Log in 
    <span ng-if="loading" class="ion-refreshing no-animate"></span>
</button>

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() de forcer la mise à jour de la liaison.

Il fonctionne comme un charme.

Évitez d'utiliser $scope.$applycar cela 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();
}

J'ai eu le même problème lors de l'utilisation

<div *ngIf='shouldShow'>
    <!-- Rest of DIV content here -->
</div>

Dans mon cas, je l'ai résolu en ajoutant une classe:

.hidden {
  display: none;
}

puis en ajoutant la classe conditionnellement au lieu d'utiliser *ngIf:

<div [ngClass]="{'hidden': !shouldShow}">
    <!-- Rest of DIV content here -->
</div>

Si vous l'utilisez toujours de cette façon, j'envisagerais shouldShowde renommer en shouldHide(et d'annuler la logique qui l'attribue), afin qu'il puisse être utilisé comme shouldHideau lieu de !shouldShow.

Si vous avez display: flexdans votre CSS pour la classe existante de DIV, cette propriété d'affichage peut avoir la priorité sur le display: hidden. Une solution simple peut être d'utiliser à la display: none !importantplace, mais il existe souvent de meilleures solutions pour garantir la priorité par d'autres moyens. Voici une bonne lecture sur les alternatives .

dans la version angulaire 1.5.x en ajoutant $scope.$apply()après le changement de condition fait 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();
            }


        }