AngularJS模块学习之Anchor Scroll


Posted in Javascript onJanuary 19, 2016

俗话说的好:好记性不如一个烂笔头,本文对angularjs模块学习笔记,首先我们从anchor scroll开始学习,具体内容请看下文:

•$anchorScroll()用于跳转至定义ID;
•$location对象的hash()方法会替换当前url作为hash键;
•$anchorScroll()读取并跳转至ID处。

下面简单的例子,这里是输出结果:

AngularJS模块学习之Anchor Scroll

源码 index.html--11行,标示了的跳转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();
}
});

以上所述是小编给大家整理的AngularJS模块学习之Anchor Scroll 的相关内容,希望大家喜欢。

Javascript 相关文章推荐
Javascript自定义排序 node运行 实例
Jun 05 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
angularjs性能优化的方法
Sep 05 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
vue权限问题的完美解决方案
May 08 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
jQuery unbind()方法实例详解
Jan 19 #Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 #Javascript
详解JavaScript对象序列化
Jan 19 #Javascript
学习JavaScript设计模式之单例模式
Jan 19 #Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 #Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 #Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 #Javascript
You might like
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
实现PHP搜索加分页
2016/10/12 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
详解Python中的日志模块logging
2015/06/19 Python
Python基本语法经典教程
2016/03/11 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
国外的一些J2EE面试题一
2012/10/13 面试题
学生自我鉴定范文
2013/10/04 职场文书
酒店总经理助理职责
2014/02/12 职场文书
文员岗位职责
2015/02/04 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL