$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的更多相关文章

  1. Angular - - $anchorScroll、$controller、$document

    $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过 ...

  2. angular 滚动

    AngularJs $anchorScroll.$controller.$document $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到 ...

  3. AngularJS 源码分析1

    AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方式来组件化前端开发,可以去它的官网看看,请戳这里 再贴上一个 ...

  4. angular源码分析：angular的整个加载流程

    在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...

  5. angular源码分析：angular的源代码目录结构说明

    一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...

  6. Angular源代码学习笔记-原创

    时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...

  7. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  8. Angularjs 源码

    /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http://angularjs.org function t ...

  9. angular核心原理解析2：注入器的创建和使用

    上一课没有讲到创建注入器的方法createInjector. 此方法,会创建两种不同的注入器:第一种叫做providerInjector,第二种叫做instanceInjector.providerI ...

随机推荐

  1. 【转】CSS Sprites教程大全（使用方法、工具介绍）

    什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...

  2. 数据字典生成工具之旅(7)：NVelocity实现代码生成器

    这个系统好久没有更新了,人也慢慢变懒了,从现在开始每个月至少写三篇文章,欢迎大家监督.对了预告一下,该系列完成以后将为大家带来WebApp开发系列篇,敬请期待.先上几张图,放在文章最后面欢迎预览! 本 ...

  3. opencv3-core之基本操作

    这一篇打算将core部分的例子说完,这都是基于<opencv2.4.9tutorial.pdf>中的core部分,其实这些例子后期都很稳定的,也就是说就算是2.3.1和2.4.10 ,这几 ...

  4. Scala入门之控制结构

    package com.dtspark.scala.basics /** * Scala中的基本控制结构有顺序.条件和循环三种方式,这个其它的JVM语言是一致的,但是Scala也有一些高级的流程控制结 ...

  5. Android实现滑动刻度尺效果，选择身高体重和生日

    刻度尺效果虽然看起来很美,我个人认为很不实用,即使再不实用,也有用的,鉴于群里成员对我的苦苦哀求,我就分享一个他用不到的,横屏滑动刻度尺,因为他需要竖屏的,哈哈…… 最近群里的开发人员咨询怎样实现刻度 ...

  6. [CF#290 Div.1 C]Fox And Dinner（最大流）

    题目:http://codeforces.com/contest/512/problem/C 题目大意:给你若干个数,让你分成k组,每组围成一个圆,使得相邻两个数和均为素数,且每组人数应>=3个 ...

  7. Oracle学习——安装系列

    简介:Oracle Database,又名Oracle RDBMS,或简称Oracle.是甲骨文公司的一款关系数据库管理系统.它是在数据库领域一直处于领先地位的产品.可以说Oracle数据库系统是目前 ...

  8. 53-whereis 查找文件

    查找文件 whereis [options] file 参数 file 是whereis需要查找的文件,这些文件属于原始代码,二进制文件或是帮助文件 选项 -b               只查找二进 ...

  9. MyBatis学习--SqlMapConfig.xml配置文件

    简介 SqlMapConfig.xml是MyBatis的全局配置文件,在前面的文章中我们可以看出,在SqlMapConfig.xml主要是配置了数据源.事务和映射文件,其实在SqlMapConfig. ...

  10. HTTP协议学习---（十）拓展-HTTPS协议

    HTTPS(Hypertext Transfer Protocol over Secure Socket Layer,基于SSL的HTTP协议)使用了HTTP协议,但HTTPS使用不同于HTTP协议的 ...