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 beschäftigt ist. Ich mache das mit Angular, indem ich die Variable $ scope.loading ändere, wenn eine Anfrage geladen wird oder wenn sie geladen 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 einwandfrei, aber das Ladesymbol (Ionenauffrischung) wird ca. 2 Sekunden lang angezeigt, während die Variable $ scope sofort aktualisiert wird. Ich habe $ scope. $ Apply ausprobiert, aber das scheint hier nicht falsch zu sein. Der Bereich wird einwandfrei und unmittelbar nach der Anforderung aktualisiert. Es ist nur das Symbol, das nicht schnell genug reagiert.

Danke, dass du mir geholfen hast, das zu verstehen!

Versuchen Sie, ngAnimate zu entfernen, wenn Sie es nicht von Ihrer App-Konfigurations- und index.html-Seite verwenden:

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

@Spock; Wenn Sie weiterhin ngAnimate benötigen, lassen Sie Ihre App-Konfiguration unberührt und fügen Sie einfach das folgende CSS hinzu:

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

Dadurch wird das animierte Symbol direkt ausgeblendet, nachdem Ihre Bedingung erfüllt ist.

Wie Sie sehen können, setzen wir .ng-hide-animate auf hidden. Dies ist der Grund für die Verzögerung, da auf den Abschluss der Animation gewartet wird. Sie können Ihrem Hide-Ereignis eine Animation hinzufügen, wie der Klassenname impliziert, anstatt sie wie im obigen Beispiel auszublenden.

Ich hatte das gleiche Problem und habe es umgangen, indem ich ng-class mit dem Klassennamen 'hidden' verwendet habe, um das Element auszublenden, anstatt ng-if oder ng-show / ng-hide zu verwenden.

Ich habe hier einige Lösungen gefunden , aber das Beste für mich war, das Styling für die .ng-animate-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 zu helfen.

Ich hatte ein ähnliches Problem. Ich habe die $scope.$evalAsync()Aktualisierung der Bindung erzwungen.

Es wirkt wie ein Zauber.

Vermeiden Sie die Verwendung, $scope.$applyda dies zu Konflikten mit 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();
}

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 zu verwenden *ngIf:

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

Wenn immer es auf diese Weise verwendet wird , würde ich prüfen , die Umbenennung shouldShowzu shouldHide(und die Logik , dass Abtretungs es negieren), so kann es als verwendet werden , shouldHidestatt !shouldShow.

Wenn Sie display: flexin Ihrem CSS die vorhandene Klasse des DIV haben, hat diese Anzeigeeigenschaft möglicherweise Vorrang vor der display: hidden. display: none !importantStattdessen kann eine einfache Lösung verwendet werden. Oft gibt es jedoch bessere Lösungen, um auf andere Weise Vorrang zu haben. Hier finden Sie eine gute Lektüre über Alternativen .

In der Winkelversion 1.5.x ist das Hinzufügen $scope.$apply()nach der Änderung der Bedingung, die für mich erledigt wurde, 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();
            }


        }