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 ...
随机推荐
- es6+移动轮播插件
前言:之前赶项目,都是直接用框架,对于touch事件是模拟两可,趁着有心情,用es6写一个原生移动轮播插件. 用了es6的新特性,确实挺爽的,说到es6,就不得不说到babel,博主已经码好了,直接用 ...
- FineUI参考手册(离线版)现已免费提供下载!
http://fineui.com/bbs/forum.php?mod=viewthread&tid=3473
- WP8 对音视频格式支持的完整说明
Supported media codecs for Windows Phone http://msdn.microsoft.com/en-us/library/windowsphone/develo ...
- 实现解耦-Spring.Net
spring.net属于IOC(中文名:控制反转)的思想实现. 概念解释: 控制反转概念: 控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来 ...
- webpack入坑之旅(六)配合vue-router实现SPA
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- C# 压缩与解压字符串(面试题)
/* * 题目:压缩字符串.如“abbcccddddeef”,压缩成“a1b2c3d4e2f1” * 解题: 这个题目也是面试常见的题目.看似很简单,其实暗藏杀机.一般的想法就是,一边遍历,一边计数, ...
- MyEclipse10连接数据库
连接oracle数据库 DB窗口>>右键:新建
- canvas缓动2
同之前的缓动原理.这里将终点换成鼠标,做出跟随效果 var canvas = document.getElementById("canvas"); var cxt=canvas.g ...
- oracle操作记录
由于之前建的job过多,造成数据库cpu占用率达到99%,造成需要的job崩溃. 以下为解决方案: 1. 查询当前的job列表 : select * from user_jobs; 2. 暂停所有的j ...
- php上传sae路径问题
我们写php时,会有 define('POOT_PATH', dirname(__FILE__)); 但是sea中没有用,所以我们要用 define("ROOT_PATH", $_ ...