wake-up-neo.com

winkel ng-if oder ng-show reagiert langsam (2 Sekunden Verzögerung?)

Ich versuche, eine Ladeanzeige auf einer Schaltfläche anzuzeigen oder auszublenden, wenn eine Anforderung aktiv ist. Ich mache das mit angle, indem ich die Variable $ scope.loading ändere, wenn eine Anfrage geladen wird oder wenn das Laden abgeschlossen ist.

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

        })
        .error(function(error){

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

Im Frontend:

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

Dies funktioniert gut, aber das Ladesymbol (Ionenauffrischung) wird etwa 2 Sekunden lang angezeigt, während die Variable $ scope sofort aktualisiert wird. Ich habe versucht, $ scope. $ Zu verwenden, aber das scheint nicht das zu sein, was hier falsch ist. Es ist nur das Symbol, das nicht schnell genug reagiert.

Danke, dass Sie mir geholfen haben, das zu verstehen!

76
Jorre

Versuchen Sie, ngAnimate zu entfernen, wenn Sie es nicht in Ihrer App-Konfigurations- und Indexseite verwenden:

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

@Spock; Wenn Sie weiterhin die Verwendung von ngAnimate benötigen, lassen Sie Ihre App-Konfiguration unverändert und fügen Sie einfach das folgende CSS hinzu:

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

Dadurch wird das animierte Symbol sofort ausgeblendet, wenn Ihre Bedingung erfüllt ist.

Wie Sie sehen, setzen wir .ng-hide-animieren auf ausgeblendet. Dies ist, was die Verzögerung verursacht, während sie wartet, bis die Animation abgeschlossen ist. Sie können eine Animation zu Ihrem hide-Ereignis hinzufügen, wie der Klassenname impliziert, anstatt sie wie im obigen Beispiel auszublenden.

118
Palvinder

Ich hatte das gleiche Problem und konnte es umgehen, indem ich ng-class mit dem "versteckten" Klassennamen verwendete, um das Element auszublenden, anstatt ng-if oder ng-show/ng-hide zu verwenden. 

37
neimad

Ich fand einige Lösungen hier , aber das Beste für mich war, das Styling für die .ng-animierte Klasse zu überschreiben:

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

Dies ist ein Beispiel: http://jsfiddle.net/9krLr/27/

Ich hoffe dir helfen.

12
Ruben Perez

Ich war mit einem ähnlichen Problem konfrontiert und benutzte $scope.$evalAsync(), um die Aktualisierung der Bindung zu erzwingen.

Es wirkt wie ein Zauber.

Vermeiden Sie die Verwendung von $scope.$apply, da dies zu einer bereits laufenden $ Digest-Phase führen kann.

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

Ich hatte das gleiche Problem bei der Verwendung

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

In meinem Fall habe ich es durch Hinzufügen einer Klasse gelöst:

.hidden {
  display: none;
}

und dann die Klasse bedingt hinzufügen, anstatt *ngIf zu verwenden:

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

Wenn ich es immer auf diese Weise verwende, würde ich erwägen, shouldShow in shouldHide umzubenennen (und die Logik zu negieren, die es zuweist), damit es als shouldHide anstelle von !shouldShow verwendet werden kann. .

Wenn Sie display: flex in Ihrem CSS für die vorhandene Klasse des DIV haben, hat diese Anzeigeeigenschaft möglicherweise Vorrang vor display: hidden. Eine einfache Lösung kann darin bestehen, stattdessen display: none !important zu verwenden. Es gibt jedoch häufig bessere Lösungen, um den Vorrang auf andere Weise sicherzustellen. Hier ist eine gute Lektüre über Alternativen .

in der Winkelversion 1.5.x fügt man $scope.$apply() hinzu, nachdem nach der Änderung der Bedingung die Aufgabe für mich erledigt wurde, hier eine Beispielfunktion 

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


        }
0
mohamed