Angularjs: Wie scrollt man die Seite nachdem ng-show versteckte Elemente anzeigt?

8

Ich habe eine Liste mit versteckten Gegenständen. Ich muss die Liste anzeigen und dann zu einem von ihnen mit einem einzigen Klick scrollen. Ich habe den Code hier reproduziert: Ссылка

Wie ich in der Konsole sehe, wird scrollTop () aufgerufen, bevor die Elemente sichtbar sind, also denke ich, dass ng-show nicht sofort ist und dieser Ansatz falsch ist. Es funktioniert ScrollTop () mit einem Timeout zu verzögern, aber ich möchte das nicht tun.

Gibt es andere Lösungen?

    
macene 10.11.2013, 11:08
quelle

2 Antworten

15

Ich sehe keine andere Lösung als den Aufruf von scrollTop() zu verzögern, wenn ng-show verwendet wird. Sie müssen warten, bis sich die Änderungen in Ihrem Modell im DOM widerspiegeln, sodass die Elemente sichtbar werden. Der Grund, warum sie nicht sofort angezeigt werden, ist der Lebenszyklus des Scopes. ng-show verwendet intern einen Überwachungsprogramm-Listener, der nur ausgelöst wird, wenn die $digest() -Funktion des Bereichs nach der Ausführung des vollständigen Codes in Ihrem Klick-Handler aufgerufen wird.

Siehe Ссылка für eine detailliertere Erläuterung des Gültigkeitsbereichslebenszyklus.

Normalerweise sollte es kein Problem sein, ein Zeitlimit zu verwenden, das nach diesem Ereignis ohne Verzögerung wie folgt ausgeführt wird:

%Vor%

Alternative Lösung ohne Zeitüberschreitung:

Wenn Sie jedoch das Zeitüberschreitungs-Ereignis vermeiden möchten (dessen Ausführung möglicherweise andere Ereignisse in der Ereigniswarteschlange vorausgehen), und stellen Sie sicher, dass das Scrollen im Click-Ereignishandler erfolgt. Sie können Folgendes in Ihrem Controller tun:

%Vor%

Der Überwachungsprogramm-Listener wird innerhalb des gleichen Aufrufs von $digest() wie der Überwachungsprogramm-Listener ausgelöst, der von der Direktive ng-show registriert wurde. Die an $evalAsync() übergebene Funktion wird von angular ausgeführt, nachdem alle Überwachungsprogramm-Listener verarbeitet wurden, sodass die Elemente bereits durch die ng-show -Direktive sichtbar gemacht wurden.

    
lex82 10.11.2013, 12:11
quelle
0

Sie können $anchorScroll verwenden.
Hier ist die Dokumentation:

Ссылка

Beispiel:

%Vor%     
DanielCamboim 23.03.2017 17:13
quelle