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 ...
随机推荐
- ModernUI教程：MEF应用向导
本文主要说明在Modern UI框架下使用MEF的必要步骤,关于MEF请自行脑补. MEF-INTO-MUI实例代码下载: MefMuiApp.zip 1:创建一个导出属性 ModernFrame用来 ...
- Windows Phone 8 显示当前项目的使用内存，最大峰值，最大内存上限
public static class MemoryDiagnosticsHelper { public static bool isStart = false; static Popup popup ...
- javascript代码片段
DOMReady函数,只要DOM结构加载完成即可,不必等待所有资源加载完成,节约时间,"DOMContentLoaded"在H5中被标准化 var DOMReady=functio ...
- [转]C#操作注册表
原文链接:http://www.cnblogs.com/txw1958/archive/2012/08/01/csharp-regidit.html 下面我们就来用.NET下托管语言C#注册表操作,主 ...
- Ubuntu修改文件关联
* 在system setting>details中可以设置一部分文件关联,很弱很破. * 右键open with只能临时选择打开方式,并且可选的打开方式十分有限.如果是自己编的程序,在列表中没 ...
- C＃中的数组，多维数组和交错数组
想研究一些面向对象的东西,也许是代码写得还不够多.感觉还不好,看那些教程,不是嫌太水就是太难看不懂.心情很是落寞 不过再怎样也要坚持每天发一篇博客. 这篇来说一下C#中的数组,多维数组,交错数组的一些 ...
- ListView适配器获取布局文件作为View的三种方式
第一种方法: public View getView(int position, View convertView, ViewGroup parent) { View view = null; if ...
- Jenkins的maven工程打包的时候怎么指定不同环境的配置文件
http://outofmemory.cn/code-snippet/6643/maven-profile-define-enviroment-package 在打包的时候我们添加上 这里我们指定配置 ...
- [转]看懂ExtJS的API
原文地址:http://www.cnblogs.com/youring2/archive/2013/03/05/2944004.html ExtJS的功能很强大,相应的其API也很庞大,并且看起来并不 ...
- [转]javascript Date format(js日期格式化)
方法一:这个很不错,好像是 csdn 的 Meizz 写的: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) ...