AngularJS模块学习之Anchor Scroll
2016-01-19 14:20
645 查看
俗话说的好:好记性不如一个烂笔头,本文对angularjs模块学习笔记,首先我们从anchor scroll开始学习,具体内容请看下文:
•$anchorScroll()用于跳转至定义ID;
•$location对象的hash()方法会替换当前url作为hash键;
•$anchorScroll()读取并跳转至ID处。
下面简单的例子,这里是输出结果:
源码 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 的相关内容,希望大家喜欢。
您可能感兴趣的文章:
相关文章推荐
- winform 使用Anchor属性进行界面布局的方法详解
- div scroll始终在最底部的实现代码
- javascript中offset、client、scroll的属性总结
- AngularJS基础教程之简单介绍
- jQuery插件scroll实现无缝滚动效果
- Class Of Marquee Scroll通用不间断滚动JS封装类第1/2页
- Javascript模拟scroll滚动效果脚本第1/2页
- angularJS 中$attrs方法使用指南
- 简述AngularJS相关的一些编程思想
- AngularJS的一些基本样式初窥
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- angularJS与bootstrap结合实现动态加载弹出提示内容
- AngularJS实现全选反选功能
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
- 举例讲解AngularJS中的模块