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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
js校验开始时间和结束时间
May 26 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
vue绑定class的三种方法
Dec 24 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
新闻网站实习自我鉴定
2013/09/25 职场文书
就业协议书怎么填
2014/04/11 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书