Ich verbringe meine ersten paar Stunden mit Angular JS und versuche ein SPA damit zu schreiben. Beim Ändern der Route bleibt die Bildlaufposition jedoch nach dem Ändern der Routen an ihrer aktuellen Position. Dies bedeutet, dass, wenn jemand die Hälfte des Textes auf Seite zwei durchliest, diese Person in der Mitte der Seite endet, wenn zwei auf die zweite Seite wechseln. (Vorausgesetzt, die Seiten sind gleich lang.)Wie setze ich die Bildlaufposition bei einer Routenänderung zurück?
Wenn ich nach Lösungen suche, finde ich nur Leute, die nach dem Gegenteil fragen, d. H. Sie wollen die Scroll-Position nicht ändern, wenn sie die Seiten wechseln. Ich habe es jedoch nicht geschafft, auch nur das zu reproduzieren. Ich frage mich, ob die Entwicklung von Angular JS weiter voranging und die Quellen, die ich konsultierte, überholt waren.
habe ich eine Minimalversion, die mein Problem veranschaulicht (fügen Sie einfach zwei Dateien sample1.html und sample2.html mit zufälligem Inhalt es funktioniert.):
<!DOCTYPE html>
<html>
<head lang="en"><title>SPA sample</title></head>
<body data-ng-app="myApp">
<div style="position: fixed;">
<a href="#/">Main</a>
<a href="#/other">Tutorial</a>
</div>
<div data-ng-view=""></div>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-route.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'noOp',
templateUrl: 'sample1.html'
})
.when('/other', {
controller: 'noOp',
templateUrl: 'sample2.html'
})
.otherwise({redirectTo: '/'});
});
myApp.controller('noOp', function ($scope) { });
</script>
</body>
</html>
Sie könnten der Suche nach [$ anchorScroll] (http://docs.angularjs.org/ api/ng/service/$ AnkerScroll). – miqid
Ich lese es durch. Also sollte der Controller, der jetzt noop ist, diese Ankerrolle bekommen und anwenden? Entschuldigung, ich bin zu eckig ziemlich neu. –