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!
$scope
Funktionen protokolliert habe ,ng-if
mit denen herausgefunden wird, ob die relevanten Elemente angezeigt werden sollen. Schaltflächenng-if
bleiben jedoch für einige Sekunden falsch sichtbar oder ausgeblendet. Nach kurzer Zeit nehmen alle Tasten ihren beabsichtigten sichtbaren / verborgenen Zustand an. - Ich habe das umgangen, indem ichng-hide
stattdessen verwendet habe. Winkelversion 1.2.16.Antworten:
Versuchen Sie, ngAnimate zu entfernen, wenn Sie es nicht von Ihrer App-Konfigurations- und index.html-Seite verwenden:
@Spock; Wenn Sie weiterhin ngAnimate benötigen, lassen Sie Ihre App-Konfiguration unberührt und fügen Sie einfach das folgende CSS hinzu:
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.
quelle
ng-if
,ng-show
die sichtbar langsam war. Ich habe es entferntngAnimate
und es hat das Problem für mich behoben. Vielen Dank!ng-if
hat das Hinzufügen nur.ng-leave { display:none; }
zum Element den Trick für mich getan (!important
wurde nicht benötigt).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.
quelle
null
(der einige Sekunden auf den API-Aufruf wartet), sodass zwei ausgewählte Elemente kurz angezeigt werden. Also benutzt du überhaupt nichtng-if
? Vielen Dank.Ich habe hier einige Lösungen gefunden , aber das Beste für mich war, das Styling für die .ng-animate-Klasse zu überschreiben:
In HTML:
Dies ist ein Beispiel: http://jsfiddle.net/9krLr/27/
Ich hoffe dir zu helfen.
quelle
Ich hatte ein ähnliches Problem. Ich habe die
$scope.$evalAsync()
Aktualisierung der Bindung erzwungen.Es wirkt wie ein Zauber.
Vermeiden Sie die Verwendung,
$scope.$apply
da dies zu Konflikten mit einer bereits laufenden $ Digest-Phase führen kann.quelle
Ich hatte das gleiche Problem bei der Verwendung
In meinem Fall habe ich es durch Hinzufügen einer Klasse gelöst:
und dann die Klasse bedingt hinzufügen, anstatt zu verwenden
*ngIf
:Wenn immer es auf diese Weise verwendet wird , würde ich prüfen , die Umbenennung
shouldShow
zushouldHide
(und die Logik , dass Abtretungs es negieren), so kann es als verwendet werden ,shouldHide
statt!shouldShow
.Wenn Sie
display: flex
in Ihrem CSS die vorhandene Klasse des DIV haben, hat diese Anzeigeeigenschaft möglicherweise Vorrang vor derdisplay: hidden
.display: none !important
Stattdessen 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 .quelle
In der Winkelversion 1.5.x ist das Hinzufügen
$scope.$apply()
nach der Änderung der Bedingung, die für mich erledigt wurde, eine Beispielfunktionquelle