Verhindert das Scrollen eines scrollbaren divs dynamisch aktualisiert auf AngularJs
Ich habe eine eckige App mit einer Powerpoint-ähnlichen Schnittstelle.
Die linken Elemente (scrollbar <div> ) sind Teile eines Controllers, der mit ui-sref aufgerufen wird, der Folieninhalt stammt von einem anderen (untergeordneten) Controller und wird mit einem ng-show aktualisiert.
Wenn ich auf einen Gegenstand (auf der linken Seite des Bildes) klicke, ändert sich der Inhalt der Folie (rechts) dynamisch. Das Problem ist, dass die scrollbare Ansicht immer nach oben scrollt, wenn auf ein Element geklickt wird.
Ich habe viele Ansätze auf SO versucht, aber nichts funktioniert:
- setze das Attribut
autoscrollauffalseaufui-view -
myModule.value('$anchorScroll', angular.noop); -
myModule.run(['$anchorScroll', function($anchorScroll) { $anchorScroll = angular.noop; }]); -
$anchorScrollProvider.disableAutoScrolling();
Bearbeiten / hier die Attribute aller Links-Tags:
%Vor%Hat jemand eine Idee?
1 Antwort
Ich bin mir nicht ganz sicher, was Sie mit $anchorScroll versuchen, aber wie die Kommentare zeigen, ist es wahrscheinlich, dass ui-router mit ui-view anstelle von ng-show verwendet werden soll. Außerdem ist es ein bisschen schwierig, Ihr Beispiel vollständig zu analysieren und Sie in die richtige Richtung zu führen, ohne Beispielcode oder ein etwas Arbeitsbeispiel als Basis. Wie auch immer, von Ihrem Diagramm aus habe ich zumindest eine Vorstellung davon, was Sie suchen - also habe ich es am besten geschätzt.
Ich ermutige Sie, mit ng-show zu verwerfen und Ihr Markup zugunsten von ui-view zu überdenken. Ich habe ein Beispiel erstellt, das Ihrem Konzept ähnelt, und ich kann den Status dynamisch ändern und den Inhalt ohne Bildlauf anzeigen. Beachten Sie das folgende vollständige Arbeitsbeispiel ...
Entschuldige meine totale Einfachheit für Zustände und Inhalte - das soll nur demonstrieren. Aber Sie können das Verhalten im Arbeitsbeispiel sehen und können diese Grundlage hoffentlich in Ihre Arbeitskopie einbauen.
JSFiddle Link - funktionierende Demo
Wie immer sollten Sie sich die UI-Router-Dokumentation für weitere Informationen ansehen.
Laut Ihrem Kommentar könnte dies eine etwas dynamischere Methode sein. Hier definiere ich nur einen Zustand, der parametrisiert ist und das $stateChangeSuccess -Ereignis abonniert. Dadurch habe ich die Möglichkeit, Scope-Variablen basierend auf einem übergebenen $stateParam zu füllen - vielleicht über einen Ajax-Aufruf.
Bitte denken Sie daran - die dynamische Natur davon wird stark variieren mit dem, was Sie zu tun versuchen. Es gibt Möglichkeiten, untergeordnete und verschachtelte Zustände dort zu nutzen sind Wege zu dynamischen Zuständen hinzufügen - wirklich - Sie können so dynamisch wie du wünschst dir hier. Am wichtigsten ist, dass ui-view wie in den folgenden Beispielen vorgesehen verwendet wird, das Scroll-Problem löst . Beachten Sie das folgende, möglicherweise dynamische, möglicherweise günstige Beispiel ...
JSFiddle Link - eine etwas dynamischere Demo
Tags und Links javascript html angularjs angularjs-directive angular-ui-router