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对内存分配及管理机制详细解析
Nov 11 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
javascript实现弹出层效果
Dec 10 Javascript
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
图象函数中的中文显示
2006/10/09 PHP
建立动态的WML站点(三)
2006/10/09 PHP
phpize的深入理解
2013/06/03 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
在小程序开发中使用npm的方法
2018/10/17 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
Python环境变量设置方法
2016/08/28 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python解析多层json操作示例
2019/12/30 Python
django model object序列化实例
2020/03/13 Python
详解Django中异步任务之django-celery
2020/11/05 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
幼儿园家长寄语
2014/04/02 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
python多次执行绘制条形图
2022/04/20 Python