Heim > Artikel > Web-Frontend > AngularJS-Modul lernt Anchor Scroll_AngularJS

AngularJS-Modul lernt Anchor Scroll_AngularJS

WBOYOriginal: 2016-05-16 15:19:101377Durchsuche

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>

app.js

var demoApp = angular.module("app",[])
.controller("MockController",
function ($scope, $location, $anchorScroll) {
$scope.numbers = {
"自然数":["","","","","","","","","","","","","","","","","","","",""],
"质数":["","","","","","", "", "", "", ""]
};
$scope.jumper = function(key){
$location.hash(key);
$anchorScroll();
}
});

Das Obige ist der relevante Inhalt des vom Herausgeber zusammengestellten Anchor Scroll for AngularJS-Moduls. Ich hoffe, es gefällt Ihnen.

Stellungnahme：

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

Vorheriger Artikel：Verstehen von JS-Bindungsereignissen_Javascript-FähigkeitenNächster Artikel：Verstehen von JS-Bindungsereignissen_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen