angular ng-if o ng-show responde lento (¿retraso de 2 segundos?)

Estoy tratando de mostrar u ocultar un indicador de carga en un botón cuando una solicitud está ocupada. Hago eso con angular cambiando la variable $ scope.loading cuando se carga una solicitud o cuando se termina de cargar.

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

        })
        .error(function(error){

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

En la interfaz:

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

Esto funciona bien, pero el ícono de carga (actualización de iones) se muestra durante aproximadamente 2 segundos, mientras que la variable $ scope se actualiza inmediatamente. Intenté $ scope. $ Apply pero eso no parece ser lo que está mal aquí, el alcance se actualiza bien e inmediatamente después de la solicitud. Es solo el ícono que no responde lo suficientemente rápido.

¡Gracias por ayudarme a entender esto!

Intente eliminar ngAnimate si no lo está usando desde la configuración de su aplicación y la página index.html:

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

@Spock; Si aún necesita el uso de ngAnimate, deje intacta la configuración de su aplicación y simplemente agregue el siguiente CSS:

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

Eso ocultará el icono animado inmediatamente después de que se cumpla su condición.

Como puede ver, estamos configurando .ng-hide-animate como oculto. Esto es lo que causa el retraso mientras espera a que se complete la animación. Puede agregar una animación a su evento hide como lo indica el nombre de la clase en lugar de ocultarlo como en el ejemplo anterior.

Tuve el mismo problema y lo solucioné usando ng-class con el nombre de clase 'oculto' para ocultar el elemento en lugar de usar ng-if o ng-show / ng-hide.

Encontré algunas soluciones aquí , pero lo mejor para mí fue anular el estilo de la clase .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>

Este es un ejemplo: http://jsfiddle.net/9krLr/27/

Espero ayudarte.

Estaba enfrentando un problema similar, solía $scope.$evalAsync()forzar la actualización del enlace.

Funciona a las mil maravillas.

Evite el uso, $scope.$applyya que puede entrar en conflicto con una fase $ digest que ya se está ejecutando.

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

Tuve el mismo problema al usar

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

En mi caso lo resolví agregando una clase:

.hidden {
  display: none;
}

y luego agregar la clase condicionalmente en lugar de usar *ngIf:

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

Si siempre lo uso de esta manera, consideraría cambiar el nombre shouldShowa shouldHide(y negar la lógica que lo asigna), para que pueda usarse como en shouldHidelugar de !shouldShow.

Si tiene display: flexen su CSS para la clase existente de DIV, esa propiedad de visualización podría tener prioridad sobre display: hidden. En su display: none !importantlugar, puede ser una solución fácil , pero a menudo hay mejores soluciones para garantizar la precedencia de otras formas. Aquí hay una buena lectura sobre alternativas .

en la versión angular 1.5.x agregando $scope.$apply()después de que el cambio en la condición hizo el trabajo para mí, aquí hay una función de ejemplo

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


        }