angular 滚动
2024-08-25 14:04:42
AngularJs $anchorScroll、$controller、$document
$anchorScroll
根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素。
监听$location.hash()并且滚动到url指定的锚点的地方。可以通过$anchorScrollProvider.disableAutoScrolling()禁用。
依赖:$window $location $rootScope
使用:$anchorScroll();
使用代码:
#id {height:500px;}
#bottom {margin-top:1500px;}
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<div id="top" ng-click="ctrl.gotoBottom()">跳到底部</div>
<div id="bottom" ng-click="ctrl.gotoTop()">跳到顶部</div>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl",["$location", "$anchorScroll",testCtrl]);
function testCtrl($location,$anchorScroll){
this.gotoTop = function () {
$location.hash("top");
$anchorScroll();
};
this.gotoBottom = function () {
$location.hash("bottom");
$anchorScroll();
};
};
}());
$controller
$controller负责实例化控制器。
这只是个简单的$injector调用,但为了以前版本的这个服务能被覆盖而被提取进一个服务。
依赖:$injector
使用:$controller(constructor,locals);
constructor:如果调用了一个函数,那么这个函数被认为是控制器构造函数。否则,它被认为是一个使用以下步骤检索控制器的构造函数的字符串:
1.检查控制器是否在$controllerProvider注册并命名。
2. 检查当前作用域上的字符串是否返回一个构造函数
3.在全局window对象上检查构造器。
locals:Object,将需要调用的控制器注册到当前控制器。
使用代码:
(function () {
angular.module("Demo", [])
.controller("demoCtrl",["$scope",demoCtrl])
.controller("testCtrl",["$controller","$scope",testCtrl]);
function demoCtrl($scope){
$scope.print = function () {
console.log("print");
};
this.prt = function () {
$scope.print();
};
};
function testCtrl($controller,$scope){
var ctrl = $controller("demoCtrl",{$scope:$scope});
ctrl.prt(); // print
};
}());
$document
一个jQuery或jqlite包装了的浏览器window.document对象。
依赖:$window
使用代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src='angular.js'></script>
<title>title-$document</title>
</head>
<body>
<div ng-app="Demo" ng-controller="testCtrl as ctrl"></div>
<script>
(function () {
angular.module("Demo", [])
.controller("testCtrl",["$document",testCtrl]);
function testCtrl($document){
var $title = $document[0].title;//title-$document
var title = angular.element(window.document)[0].title;//title-$document
var v = $document[0] === window.document;//true
};
}());
</script>
</body>
</html>
这两天被$animate和$interpolate还有$http给折腾的心累啊,有一小部分代码还没测出来,所以先把这三个内容少点的整合到一篇文章先总结了先。明天看看花点时间把那三个给写完整吧,估计需要分三篇文章来记录$animate、$interpolate和$http呢。
最新文章
- 【java手记】------------------------java中转发和重定向区别
- 1021mysql 全外连接
- Install sheild设置了Blue皮肤,但是有的窗口更改不了问题
- win7 php5.5 apache 源码安装 imagick扩展
- ListView OnScrollListener详解(滑屏分页显示数据)
- Java语言基本语法(一)————关键字&;标识符(Java语言标识符命名规范&;Java语言的包名、类名、接口名、变量名、函数名、常量名命名规则 )
- Python beautifulsoup 中文乱码
- 找不到javax.servlet.Filter类,
- ROC曲线的概念和意义
- Entity Framework 框架
- bochs的bochsrc说明
- 【Python3练习题 012】 输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。
- day 019 常用模块
- .Net core 下的ConfigurationManager类正确引用方法
- NATS_08:NATS客户端Go语言手动编写
- jquery实现回车键触发事件
- CMDB经验分享之 – 剖析CMDB的设计过程
- Linux入门-5 用户及权限基础
- zabbix 表结构详情(基本)
- Maven:Generating Project in Batch mode 卡住问题
热门文章
- STM32 ADC 测电压
- 检测cpu是否支持虚拟化和二级地址转换【转】
- C#webform LinQ
- Java项目:学生成绩管理系统(二)
- 错误 java.lang.ClassCastException: com.ylpw.sms.YZZYSenderUtil cannot be cast to ResourceBundle
- Handle机制的原理
- AseBulkCopy 若干问题的解决方法
- JAVA动手动脑
- HDFS读写数据块--${dfs.data.dir}选择策略
- 【 2013 Multi-University Training Contest 3 】