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-$documentvar title = angular.element(window.document)[0].title;//title-$documentvar v = $document[0] === window.document;//true
    };}());</script>
</body>
</html>

这两天被$animate和$interpolate还有$http给折腾的心累啊，有一小部分代码还没测出来，所以先把这三个内容少点的整合到一篇文章先总结了先。明天看看花点时间把那三个给写完整吧，估计需要分三篇文章来记录$animate、$interpolate和$http呢。

转载于:https://www.cnblogs.com/ys-ys/p/4982542.html

AngularJs $anchorScroll、$controller、$document相关推荐

一个form表单，多个提交按钮（实现不同功能和地址的提交）
直接上代码表单部分: <form action="" name="find" method="post" enctype=" ...
关于UIWebView与js交互的问题
这个问题,在网上能看到不少,主要通过调用UIWebView的一个方法stringByEvaluatingJavaScriptFromString 来实现,与js的交互问题,我想可能用的过程中会出现不少 ...
Angular - 如何在页面加载后马上做初始化
Bootstrap -- How to manually initialize Angular How to run function in angular controller on documen ...
基于javaweb+jsp的设备维修管理系统(JavaWeb MySQL JSP Bootstrap Servlet SSM SpringBoot)
基于javaweb+jsp的设备维修管理系统(JavaWeb MySQL JSP Bootstrap Servlet SSM SpringBoot) JavaWeb JavaBean JSP MVC ...
深入理解Same-Origin安全机制
概述浏览器普遍使用origin来表示权限范围.通过隔离不同origin的内容来防止某些恶意网站的运营人员(黑客)干涉正常网站的运行.本文除了描述构成origin概念的几个核心准则外,还描述了如何确定 ...
第一个PWA程序-聊天室
本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 好久没写博客了, 为了治疗懒癌, 今天我们来学习一下Google的Progressive Web App, 什么 ...
认识 AbortController控制器对象及其应用
参考文章1 参考文章2 一.什么是AbortController (abort 意为中止/废弃) AbortController是一个控制器对象(DOM API),可通过new构造函数的方式,生成控 ...
深入分析MVC、MVP、MVVM、VIPER
前言看了下上篇博客的发表时间到这篇博客,竟然过了11个月,罪过,罪过.这一年时间也是够折腾的,年初离职跳槽到鹅厂,单独负责一个社区项目,忙的天昏地暗,忙的差不多了,转眼就到了7月. 七月流火,心也跟 ...
在 Flutter 中使用 webview_flutter 4.0 | 基础用法与事件处理
大家好,我是 17. Flutter WebView 一共写了四篇文章在 Flutter 中使用 webview_flutter 4.0 | js 交互 Flutter WebView 性能优化,让 ...

AngularJs $anchorScroll、$controller、$document

AngularJs $anchorScroll、$controller、$document相关推荐

最新文章

热门文章