$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. 特殊约束From To

    说实话这个不太懂,没用过也没有遇到相应的情况(或者说我不知道).大家可以更多的去参考特定约束FROM TO和MicroZed开发板笔记,第72部分:多周期约束等内容. 本文待修正 系列目录      ...

  2. 从 datetime2 数据类型到 datetime 数据类型的转换产生一个超出范围的值

    具体的错误原因是:C#中的DateTime类型比SqlServer中的datetime范围大.SqlServer的datetime有效范围是1753年1月1日到9999年12月31日,如果超出这个范围 ...

  3. JavaScript学习笔记-商品管理新增/删除/修改功能

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. Spring学习进阶（四） Spring JDBC

    Spring JDBC是Spring所提供的持久层技术.主要目的是降低使用JDBC API的门槛,以一种更直接,更简洁的方式使用JDBC API.在Spring JDBC里用户仅需要做哪些比不可少的事 ...

  5. myeclipse下java文件乱码问题解决

    中文乱码是因为编码格式不一致导致的.1.进入Eclipse,导入一个项目工程,如果项目文件的编码与你的工具编码不一致,将会造成乱码.2.如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文 ...

  6. 1110Nested Loop Join算法

    转自 http://blog.csdn.net/tonyxf121/article/details/7796657 join的实现原理 join的实现是采用Nested Loop Join算法,就是通 ...

  7. SharedPreferences

    除了SQLite数据库外,SharedPreferences也是一种轻型的数据存储方式,它是Android数据持久化方法中最简单的一种. 其本质是基于XML文件存储key-value键值对数据,通常用 ...

  8. Ubuntu14.04下安装tomcat

    1.官方网站下载最新的tomcat:http://tomcat.apache.org/download-80.cgi在ubuntu上,我们下载zip和tar.gz.Ubuntu14.04安装和配置To ...

  9. [转]JAVA设计模式之单例模式

    原文地址:http://blog.csdn.net/jason0539/article/details/23297037 概念: java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主 ...

  10. WebApi服务Uri加密及验证的两种方式

    最近的一个项目要求服务端与UI层分离,业务层以WebApi方式向外提供所有业务服务,服务在数据保密性方面提出了要求,主要包括: 1:客户端认证: 2:服务请求超时(默认5分钟): 3:服务Get请求的 ...