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

Question

Sto tentando di mostrare o nascondere un indicatore di caricamento su un pulsante quando una richiesta è occupata. Lo faccio con angolare cambiando la variabile $ scope.loading quando una richiesta si sta caricando o quando ha finito 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> 

Questo funziona bene, ma l'icona di carico (ione-rinfrescante) viene mostrato per circa 2 secondi, mentre la variabile $ campo di applicazione è aggiornato immediatamente. Ho provato $ scope. $ Apply ma non sembra essere quello che non va qui, lo scope viene aggiornato bene e subito dopo la richiesta. È solo l'icona che non risponde abbastanza velocemente.

Grazie per avermi aiutato a capire questo!

Answer 1

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

Answer 2

Provare a rimuovere ngAnimate se non lo si utilizza dalla tua applicazione di configurazione e la pagina index.html:

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

@Spock; se ancora richiedere l'uso di ngAnimate poi lasciare la vostra applicazione di configurazione intatta e basta aggiungere il seguente CSS:

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

Che vi nascondere l'icona animata subito dopo la sua condizione è soddisfatta.

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

Answer 3

ho trovato alcune soluzioni here, ma la cosa migliore per me era l'override del styling 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.

Answer 4

Ero di fronte a un problema simile, ho usato $scope.$evalAsync() per forzare l'aggiornamento del binding.

Funziona come un fascino.

Evitare l'uso di $scope.$apply in 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(); 
} 

Answer 5

nella versione angolare 1.5.x aggiungendo $scope.$apply() dopo il cambiamento nella condizione di fatto il lavoro per me qui è 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(); 
      } 


     }