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呢。




 
												


											
angular 滚动的更多相关文章
	

    
								
  1. angular实现的文字上下无缝滚动
		
    最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令. css代码:主要控制样式 <style type="text/css"&g ...
    
		
    2. 
						
  2. Angular: 使用 RxJS Observables 来实现简易版的无限滚动加载指令
		
    我使用 angular-cli 来搭建项目. ng new infinite-scroller-poc --style=scss 项目生成好后,进入 infinite-scroller-poc 目录下 ...
    
		
    3. 
						
  3. Angular关于$anchorScroll的定位滚动
		
    以下是实现定位滚动的代码: <!DOCTYPE html> <html lang="en" ng-app="app"> <head ...
    
		
    4. 
						
  4. [转]angular 监听窗口滚动
		
    本文转自:https://blog.csdn.net/ittvibe/article/details/80060801 转自:http://brianflove.com/2016/10/10/angu ...
    
		
    5. 
						
  5. 【angularjs】使用angular搭建项目，滚动距离
		
    常用方法 滚动到顶部:$ionicScrollDelegate.scrollTop();或者$ionicScrollDelegate.$getByHandle('视图句柄').scrollTop(); ...
    
		
    6. 
						
  6. angular浏览器滚动条滚动到指定element 触发事件
		
    angular.module('app').directive('ScrollTrigger', () => { return { restrict: "A", link:f ...
    
		
    7. 
						
  7. 使用 Angular 和 RxJS 实现的无限滚动加载
		
    无限滚动加载应该是怎样的? 无限滚动加载列表在用户将页面滚动到指定位置后会异步加载数据.这是避免寻主动加载(每次都需要用户去点击)的好方法,而且它能真正保持应用的性能.同时它还是降低带宽和增强用户体验 ...
    
		
    8. 
						
  8. Angular 回到顶部 滚动到特定的页面位置
		
    $timeout(function() { // $location.hash('bottom'); // $anchorScroll(); // var a=angular.element(&quo ...
    
		
    9. 
						
  9. Angular移除不必要的$watch之性能优化
		
    双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. call 和 apply使用
			
      call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」 ...
    
			
    2. 
						
  2. 微信支付之扫码支付开发：我遇到的坑及解决办法(附：Ecshop 微信支付插件)
			
    前段时间帮一个朋友的基于ecshop开发的商城加入微信扫描支付功能,本以为是很简单的事儿——下载官方sdk或开发帮助文档,按着里面的做就ok了,谁知折腾了两三天的时间才算搞定,中间也带着疑问在网上找了 ...
    
			
    3. 
						
  3. SQL经典面试题及答案
			
    1.一道SQL语句面试题,关于group by表内容:2005-05-09 胜2005-05-09 胜2005-05-09 负2005-05-09 负2005-05-10 胜2005-05-10 负2 ...
    
			
    4. 
						
  4. 深入理解iOS开发中的BitCode功能
			
    前言 做iOS开发的朋友们都知道,目前最新的Xcode7,新建项目默认就打开了bitcode设置.而且大部分开发者都被这个突如其来的bitcode功能给坑过导致项目编译失败,而这些因为bitcode而 ...
    
			
    5. 
						
  5. OC语言中BOOL 和 bool 区别
			
    1.类型不同 BOOL为int型: bool为布尔型: 2.长度不同 bool只有一个字节: BOOL长度视实际环境来定,一般可认为是4个字节: 3.取值不同 bool取值false和true,是0和 ...
    
			
    6. 
						
  6. Python的50个模块，满足你各种需要
			
    Python具有强大的扩展能力,我列出了50个很棒的Python模块,包含几乎所有的需要:比如Databases,GUIs,Images, Sound, OS interaction, Web,以及其 ...
    
			
    7. 
						
  7. Android编程思想双11口诀
			
    能复制就复制,节约时间避免出错 保留原本结构,简单上手容易调试 说明随手可得,不用上网或打开文档 增加必要注释,说明功能和使用方法 命名尽量规范,容易查找一看就懂 函数尽量嵌套,减少代码容易修改 最先 ...
    
			
    8. 
						
  8. c++学习笔记1
			
    1.explicit 防止隐式类型转换 2.cbegin() cend()等价于返回 const_iterator 类型 3.it->mem 等价于 (*it).mem 4.不允许使用一个数组初 ...
    
			
    9. 
						
  9. LDAP抛出Error Code 3 - Timelimit Exceeded 异常，导致CAS连接报错
			
    最近公司使用CAS连接LDAP,实现单点登录.遇到了这个问题:登录后,抛出错误: 查看CAS后台,看到这个异常. javax.naming.TimeLimitExceededException: LD ...
    
			
    10. 
						
  10. 一张关于docker版本的图
			
    今天安装了windows内测版的docker,的确是是把vitualbox换成了hyper-v,如左图,server的os 还是linux.不过之前在nanoserver上装的docker 也的确是原 ...
    
			
    11.