angular ng-if o ng-show risponde lentamente (2 secondi di ritardo?)

Sto cercando di mostrare o nascondere un indicatore di caricamento su un pulsante quando una richiesta è occupata. Lo faccio con angular modificando la variabile $ scope.loading quando una richiesta viene caricata o quando ha terminato il caricamento.

 $scope.login = function(){
     $scope.loading = true;
    apiFactory.getToken()
        .success(function(data){

        })
        .error(function(error){

        })
         .finally(function(){
               $timeout(function() {
                 $scope.loading = false;
               }, 0);
         });
 };

Nel frontend:

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

Funziona bene, ma l'icona di caricamento (ion-refreshing) viene visualizzata per circa 2 secondi, mentre la variabile $ scope viene aggiornata immediatamente. Ho provato $ scope. $ Apply ma non sembra essere ciò che non va qui, l'ambito viene aggiornato correttamente e immediatamente dopo la richiesta. È solo l'icona che non risponde abbastanza rapidamente.

Grazie per avermi aiutato a capire questo!

Prova a rimuovere ngAnimate se non lo stai utilizzando dalla configurazione dell'app e dalla pagina index.html:

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

@Spock; se hai ancora bisogno di usare ngAnimate, lascia la configurazione della tua app intatta e aggiungi semplicemente il seguente CSS:

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

Ciò nasconderà l'icona animata subito dopo che la tua condizione è soddisfatta.

Come puoi vedere, stiamo impostando .ng-hide-animate su nascosto. Questo è ciò che causa il ritardo mentre attende il completamento dell'animazione. Puoi aggiungere un'animazione al tuo evento hide come suggerisce il nome della classe invece di nasconderla come nell'esempio sopra.

Ho avuto lo stesso problema e ho risolto il problema utilizzando ng-class con il nome della classe "nascosto" per nascondere l'elemento invece di utilizzare ng-if o ng-show / ng-hide.

Ho trovato alcune soluzioni qui , ma la cosa migliore per me è stata sovrascrivere lo stile per la classe .ng-animate:

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

In 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>

Questo è un esempio: http://jsfiddle.net/9krLr/27/

Spero di aiutarti.

Stavo affrontando un problema simile, ho usato $scope.$evalAsync()per forzare l'aggiornamento dell'associazione.

Esso funziona magicamente.

Evita di usarlo $scope.$applyin quanto può entrare in conflitto con una fase $ digest già in esecuzione.

if(selectedStatistics.length === 0 || selectedWorkgroups.length === 0){
    ctrl.isSaveDisabled = true;
    $scope.$evalAsync();
} else{
    ctrl.isSaveDisabled = false;
    $scope.$evalAsync();
}

Ho avuto lo stesso problema durante l'utilizzo

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

Nel mio caso l'ho risolto aggiungendo una classe:

.hidden {
  display: none;
}

e quindi aggiungere la classe in modo condizionale invece di usare *ngIf:

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

Se lo si utilizza sempre in questo modo, prenderei in considerazione la possibilità di rinominare shouldShowin shouldHide(e negare la logica che lo assegna), in modo che possa essere utilizzato come shouldHideinvece di !shouldShow.

Se hai display: flexnel tuo CSS per la classe esistente del DIV, quella proprietà di visualizzazione potrebbe avere la precedenza su display: hidden. In display: none !importantalternativa, è possibile utilizzare una soluzione semplice , ma spesso esistono soluzioni migliori per garantire la precedenza in altri modi. Ecco una buona lettura delle alternative .

nella versione angolare 1.5.x l'aggiunta $scope.$apply()dopo la modifica della condizione ha fatto il lavoro per me ecco una funzione di esempio

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


        }