Maison >interface Web >js tutoriel >Apprentissage du module AngularJS Anchor Scroll_AngularJS

Apprentissage du module AngularJS Anchor Scroll_AngularJS

WBOYoriginal: 2016-05-16 15:19:101402parcourir

Comme le dit le proverbe : une bonne mémoire n'est pas aussi bonne qu'un mauvais stylo. Cet article prendra des notes sur l'apprentissage du module angulairejs. Tout d'abord, nous commencerons à apprendre à partir du défilement d'ancrage. Veuillez voir ci-dessous pour le contenu spécifique :

•$anchorScroll() est utilisé pour accéder à l'ID de définition
; •La méthode hash() de l'objet $location remplacera l'url actuelle comme clé de hachage
; •$anchorScroll() lit et accède à l'ID.

Exemple simple ci-dessous, voici le résultat :

Code source index.html--11 lignes, ID de saut marqué :

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

Ce qui précède est le contenu pertinent de l'apprentissage du module Anchor Scroll pour AngularJS compilé par l'éditeur. J'espère qu'il vous plaira.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comprendre les compétences de liaison JS events_javascriptArticle suivant：Comprendre les compétences de liaison JS events_javascript

Articles Liés

Voir plus