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 ...
随机推荐
- Nutch搜索引擎系列（目录）
下面是Nutch搜索系列目录,希望对研究Nutch的同学有所帮助. 目录安排: 1)Nutch搜索引擎(第1期)_ Nutch简介及安装[下载] 2)Nutch搜索引擎(第2期)_ Solr简介及安装 ...
- PhoneGap: Android平台入门例子（Hello World）
Hello World Demo: http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Gett ...
- HTML5 postMessage 跨域交换数据
前言 之前简单讲解了利用script标签(jsonp)以及iframe标签(window.name.location.hash)来跨域交换数据,今天我们来学习一下HTML5的api,利用postMes ...
- 项目分享五：H5图片压缩与上传
一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...
- OpenStack 简介
OpenStack是IaaS(基础设施即服务)组件,让任何人都可以自行建立和提供云端运算服务. 此外,OpenStack也用作建立防火墙内的"私有云"(Private Cloud) ...
- DeviceFamily XAML Views（一）
DeviceFamily Veiws 可以为特定的设备(Mobile.Desktop等)制作特定的XAML视图,这种方式可以完全定制XMAL和共享后台代码. 以 Mobile 和 Desktop 为例 ...
- 东大OJ-5到100000000之间的回文质数
1217: VIJOS-P1042 时间限制: 0 Sec 内存限制: 128 MB 提交: 78 解决: 29 [提交][状态][讨论版] 题目描述 有一天,雄霸传授本人风神腿法 ...
- 十天冲刺---Day7
站立式会议 站立式会议内容总结: 燃尽图 照片 两个人编码其实效率挺高的.但是在一些方面,比如说页面UI的编写,会非常吃力,很难达到自己的效果. 由于埋头在编码,所以issues的增加随之停止. 有点 ...
- jQuery自定义插件
jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, ( ...
- [转]Java日期时间使用总结
原文地址:http://lavasoft.blog.51cto.com/62575/52975/ 一.Java中的日期概述 日期在Java中是一块非常复杂的内容,对于一个日期在不同的语言国别环境中 ...