Heim > Web-Frontend > js-Tutorial > AngularJS-Modul lernt Anchor Scroll_AngularJS

AngularJS-Modul lernt Anchor Scroll_AngularJS

WBOY
Freigeben: 2016-05-16 15:19:10
Original
1401 Leute haben es durchsucht

Wie das Sprichwort sagt: Ein gutes Gedächtnis ist nicht so gut wie ein schlechter Stift. Zuerst beginnen wir mit dem Lernen aus der Ankerrolle. Den spezifischen Inhalt finden Sie weiter unten.

•$anchorScroll() wird verwendet, um zur Definitions-ID zu springen; •Die hash()-Methode des $location-Objekts ersetzt die aktuelle URL als Hash-Schlüssel
•$anchorScroll() liest die ID und springt zu ihr.

Einfaches Beispiel unten, hier ist die Ausgabe:

Quellcode index.html – 11 Zeilen, markierte Sprung-ID:


<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<meta charset="utf-">
</head>
<body ng-controller="MockController">
<button ng-repeat="(key, value) in numbers" ng-click="jumper(key)"> {{key}} </button>
<div ng-repeat="(key, value) in numbers" id="{{key}}">
<h>{{key}}</h>
<ol>
<ul ng-repeat="item in value"> {{item}} </ul>
</ol>
</div>
</body>
</html>
Nach dem Login kopieren

app.js

var demoApp = angular.module("app",[])
.controller("MockController",
function ($scope, $location, $anchorScroll) {
$scope.numbers = {
"自然数":["","","","","","","","","","","","","","","","","","","",""],
"质数":["","","","","","", "", "", "", ""]
};
$scope.jumper = function(key){
$location.hash(key);
$anchorScroll();
}
});
Nach dem Login kopieren
Das Obige ist der relevante Inhalt des vom Herausgeber zusammengestellten Anchor Scroll for AngularJS-Moduls. Ich hoffe, es gefällt Ihnen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage