Rumah > Artikel > hujung hadapan web > Pembelajaran modul AngularJS Anchor Scroll_AngularJS

Pembelajaran modul AngularJS Anchor Scroll_AngularJS

WBOYasal: 2016-05-16 15:19:101377semak imbas

Seperti kata pepatah: ingatan yang baik tidak sebaik pen yang buruk. Artikel ini akan mengambil nota tentang pembelajaran modul angularjs Pertama, kita akan mula belajar dari skrol utama.

•$anchorScroll() digunakan untuk melompat ke ID definisi
•Kaedah hash() objek $location akan menggantikan url semasa sebagai kunci cincang
•$anchorScroll() membaca dan melompat ke ID.

Contoh mudah di bawah, berikut ialah outputnya:

Kod sumber index.html--11 baris, ID lompat bertanda:

<!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();
}
});

Di atas adalah kandungan yang berkaitan dengan Anchor Scroll untuk pembelajaran modul AngularJS yang disusun oleh editor saya harap anda menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Memahami kemahiran JS binding events_javascriptArtikel seterusnya：Memahami kemahiran JS binding events_javascript

Artikel berkaitan

Lihat lagi