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呢。
AngularJs $anchorScroll、$controller、$document的更多相关文章
- Angular - - $anchorScroll、$controller、$document
$anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过 ...
- angular 滚动
AngularJs $anchorScroll.$controller.$document $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到 ...
- AngularJS 源码分析1
AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方式来组件化前端开发,可以去它的官网看看,请戳这里 再贴上一个 ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular的源代码目录结构说明
一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- 在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
- Angularjs 源码
/** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http://angularjs.org function t ...
- angular核心原理解析2:注入器的创建和使用
上一课没有讲到创建注入器的方法createInjector. 此方法,会创建两种不同的注入器:第一种叫做providerInjector,第二种叫做instanceInjector.providerI ...
随机推荐
- 【语言基础】c++ 备忘录
1. C++ 整数类型范围 可以参照头文件limits.h定义的宏 #define INT_MAX 2147483647(32bit, 最大10位十进制) #define UINT_MAX ...
- BASH 命令以及使用方法小结
最近工作中需要写一个Linux脚本,用到了很多BASH命令,为了防止以后忘记,在这里把它们一一记下来.可能会比较乱,随便看看就好了.如果有说的不对的地方也欢迎大家指正. 1,export VAR=.. ...
- linux命令行安装使用KVM
一.说明 本篇文章介绍的是基于centos环境来安装的,ip地址192.168.4.233 二.检查CPU是否支持虚拟技术 egrep 'vmx|svm' /proc/cpuinfo 如果有输出内容表 ...
- nios II--实验6——串口软件部分
软件开发 首先,在硬件工程文件夹里面新建一个software的文件夹用于放置软件部分:打开toolsàNios II 11.0 Software Build Tools for Eclipse,需要进 ...
- 样条函数 -- spline function
一类分段(片)光滑.并且在各段交接处也有一定光滑性的函数.简称样条.样条一词来源于工程绘图人员为了将一些指定点连接成一条光顺曲线所使用的工具,即富有弹性的细木条或薄钢条.由这样的样条形成的曲线在连接点 ...
- 使用 Spring 3 来创建 RESTful Web Services
来源于:https://www.ibm.com/developerworks/cn/web/wa-spring3webserv/ 在 Java™ 中,您可以使用以下几种方法来创建 RESTful We ...
- ubuntu mysql远程登录设置
1:打开命令终端:vim /etc/mysql/my.cnf 并找到bind-address = 127.0.0.1这行 注释掉这行,如:#bind-address = 127.0.0.1,即在前面加 ...
- Ubuntu14.04下安装Hadoop2.4.0 (单机模式)
一.在Ubuntu下创建hadoop组和hadoop用户 增加hadoop用户组,同时在该组里增加hadoop用户,后续在涉及到hadoop操作时,我们使用该用户. 1.创建hadoop用户组 2.创 ...
- Swift开发小技巧--识别选中照片中的二维码
识别选中照片中的二维码 点击相册按钮,打开用户相册 @IBAction func photoBtnClick(sender: AnyObject) { // 打开相册 // 1.判断是否能够打开相册 ...
- js类型转换的坑
JS的灵活 说好听是说JS灵活, 说不好听就是JS的坑太多, JS类型转换就是一个大坑, JS的类型包括了原始类型的[null, undefined, String ,Number, Boolean] ...