Ich entwickle keine einseitige Anwendung, sondern eine "traditionelle" Seite, die AngularJS an einigen Stellen verwendet. Ich habe das folgende Problem (mit 1.3.0-Beta.6) getroffen:
Standard, funktionierende Ankerlinks:
%Vor%Das funktioniert gut. Jetzt stelle ich irgendwo eine Vorlage vor:
%Vor%welches aufgerufen wird über:
%Vor% Das Teil ist korrekt enthalten, aber der Ankerlink funktioniert nicht mehr. Ein Klick auf "Text verknüpfen" ändert nun die angezeigte URL in /#/foo anstatt /#foo und die Seitenposition ändert sich nicht.
Ich verstehe, dass die Verwendung von ng-include Angular implizit mitteilt, dass ich das routes-System verwenden und das native Ankerverknüpfungsverhalten des Browsers außer Kraft setzen möchte. Ich habe Empfehlungen gesehen, um dies zu umgehen, indem ich meine HTML-Anchor-Links zu #/#foo ändere, aber das kann ich aus anderen Gründen nicht tun.
Ich habe nicht vor, das routes-System zu verwenden - ich möchte einfach ng-include verwenden, ohne dass es mit dem Verhalten des Browsers zu tun hat. Ist das möglich?
Ich verstehe, dass die Verwendung von ng-include Angular implizit mitteilt dass ich das routes System benutzen möchte und den Browser überschreibt natives Ankerverknüpfungsverhalten. Ich habe Empfehlungen zum Arbeiten gesehen dies, indem ich meine HTML Anker Links zu # / # foo, aber ich kann das nicht tun aus anderen Gründen.
Das Routing-System ist in einem separaten Modul ngRoute definiert. Wenn Sie es also nicht selbst injiziert haben - und ich bin mir ziemlich sicher, dass Sie es nicht getan haben - ist es überhaupt nicht zugänglich.
Das Problem ist hier irgendwie anders.
ng-include hängt ab von: $http , $templateCache , $anchorScroll , $animate , $sce . Verwenden Sie also ng-include , um alle diese Dienste zu initiieren.
Der natürlichste zu untersuchende Kandidat wäre $anchorScroll . Der Code von $anchorScroll scheint dies nicht zu tun schaden, aber der Dienst hängt von $window , $location , $rootScope ab. Die Zeile 616 von $location sagt:
Im Grunde genommen wird der Basis-href auf '' gesetzt, wenn er vorher nicht gesetzt wurde.
Sehen Sie sich HIER an - aus der Antwort von BalusC :
Wie benannte Anker mögen, mit dem Tag Sie erklären im Grunde alle relativen Links dazu, einschließlich benannter Anker. Keiner der relativen Links ist relativ zu der aktuelle Anfrage - URI (wie es ohne den Tag).
Ich habe heute nicht viel Zeit, kann es also nicht selbst testen, aber was ich als erste Option prüfen möchte, ist, sich an '$ locationChangeStart' Ereignis und wenn die neue URL vom Typ #xxxxxx ist, verhindern Sie einfach das Standardverhalten und scrollen Sie stattdessen nach mit nativen Methoden. $anchorScroll
Ich denke, dass dieser Code die Arbeit machen sollte:
%Vor% Der Grund dafür ist, dass angular das Verhalten von Standard-HTML-Tags außer Kraft setzt, die auch <a> enthalten. Ich bin mir nicht sicher, wann diese Änderung passiert ist, weil angular v1.0.1 damit gut funktioniert.
Sie sollten das href-Attribut durch ngClick als ersetzen:
%Vor%Und in einer Steuerung so:
%Vor%Demo: Ссылка
Oder verwenden Sie einfach Doppel-Hash als:
%Vor%Demo: Ссылка
Update: Ich wusste nicht, dass Sie keine Änderung in HREF wollen. Sie können jedoch immer noch das gewünschte Ergebnis erzielen, indem Sie die vorhandene a -Direktive überschreiben:
Demo: Ссылка
Dies ist die beste Lösung und funktioniert in neueren Versionen von Angular:
Viel zu spät zur Party, aber ich fand, dass das Hinzufügen eines einfachen Ziels="_ self" es behebt.
%Vor% Anstatt die winkelförmige Anwendung auf die gesamte Seite anzuwenden, können Sie die Anwendung nur auf die Stellen isolieren, an denen Sie ng-include ausführen möchten. Dadurch können Links, die nicht in den Anwendungsbereich der Anwendung fallen, ihre normale Funktionalität beibehalten, während Links innerhalb der Anwendung wie gewünscht gehandhabt werden können.
Sieh diesen Plunkr:
Der Plunkr zeigt einen Link außerhalb der App, der wie normal funktioniert, und einen Link innerhalb der App, der mit einer überschreibenden a -Direktive behandelt wird, um die normale Funktionalität wiederherzustellen. Im HTML5-Modus können Standard-URLs (statt "Hashbang" -URLs) beibehalten werden.
Sie könnten auch die ganze Seite innerhalb der App laufen lassen, aber ich dachte, es wäre in jedem Fall sinnvoll, zu demonstrieren, wie man Winkel zu bestimmten Teilen der Seite isoliert.
Tags und Links angularjs