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

ionic platform

Question

Intento mostrar u ocultar un indicador de carga en un botón cuando una solicitud está ocupada. Lo hago 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 icono de carga (ion-refreshing) se muestra durante aproximadamente 2 segundos, mientras que la variable $ scope se actualiza de inmediato. Intenté aplicar $ scope. $ Pero eso no parece ser lo que está mal aquí, el alcance se actualiza muy bien e inmediatamente después de la solicitud. Es solo el icono que no responde lo suficientemente rápido.

Gracias por ayudarme a entender esto!

Answer 1

Encontré algunas soluciones here , 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

Answer 2

Estaba enfrentando un problema similar, utilicé $scope.$evalAsync() para forzar la actualización del enlace.

Funciona a las mil maravillas.

Evite usar $scope.$apply ya que puede entrar en conflicto con una fase de resumen de $ ya ejecutada.

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

Answer 3

Intenta eliminar ngAnimate si no lo estás utilizando desde la página de configuración de tu aplicación e 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 que se complete la animación. Puede agregar una animación a su evento hide como lo indica el nombre de clase en lugar de ocultarlo como en el ejemplo anterior.

Answer 4

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

Answer 5

en la versión angular 1.5.x agregando $scope.$apply() después del cambio en la condición realizada el trabajo para mí aquí es 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();
            }


        }