野兽的Angular Api 学习、翻译及理解 - - $anchorScroll、$controller、$document

野兽的ng api学习 -- $anchorScroll、$controller、$document

$anchorScroll

根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素。

监听$location.hash()并且滚动到url指定的锚点的地方。可以通过$anchorScrollProvider.disableAutoScrolling()禁用。

依赖:$window   $location   $rootScope

使用:$anchorScroll();

使用代码:

<style>

#id {

height:500px;

}

#bottom {

margin-top:1500px;

}

</style>

<div id="top" ng-click="gotoBottom()">跳到底部</div>

<div id="bottom" ng-click="gotoTop()">跳到顶部</div>

<script>

angular.module("Demo", [])

.controller("demoCtrl", ["$scope", "$location", "$anchorScroll",

function ($scope,$location,$anchorScroll) {

$scope.gotoTop = function () {

$location.hash("top");

$anchorScroll();

};

$scope.gotoBottom = function () {

$location.hash("bottom");

$anchorScroll();

};

}])

</script>

$controller

$controller负责实例化控制器。

这只是个简单的$injector调用,但为了以前版本的这个服务能被覆盖而被提取进一个服务。

依赖:$injector

使用:$controller(constructor,locals);

constructor:如果调用了一个函数,那么这个函数被认为是控制器构造函数。否则,它被认为是一个使用以下步骤检索控制器的构造函数的字符串:

1.检查控制器是否在$controllerProvider注册并命名。

2. 检查当前作用域上的字符串是否返回一个构造函数

3.在全局window对象上检查构造器。

locals:在本地注册controller。

使用代码:

angular.module("Demo", [])

.controller("testCtrl", ["$scope", function ($scope) {

var self = this;

$scope.print = function () {

console.log("print");

};

self.prt = function () {

$scope.print();

};

return self;

}])

.controller("demoCtrl", ["$scope", "$controller", function ($scope, $controller) {

var ctrl = $controller("testCtrl", { $scope: $scope });

ctrl.prt();//print

}])

$document

一个jQuery或jqlite包装了的浏览器window.document对象。

依赖:$window

使用代码:

<html>

<head>

<script src=‘angular.js‘></script>

<title>title-$document</title>

</head>

<body>

<div id="app" ng-app="Demo" ng-controller="demoCtrl">

</div>

<script>

angular.module("Demo", [])

.controller("demoCtrl", ["$scope", "$document", function ($scope, $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呢。

时间: 2024-07-30 03:24:38

野兽的Angular Api 学习、翻译及理解 - - $anchorScroll、$controller、$document的相关文章

野兽的Angular Api 学习、翻译及理解 - - $sce 和 $sceDelegate

野兽的ng api学习 -- $sce 和 $sceDelegate $sce $sce 服务是AngularJs提供的一种严格上下文逸出服务. 严格上下文逸出服务(翻译水平有限,较渣...) 严格上下文逸出(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文语境为特权或者SCE. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码

野兽的Angular Api 学习、翻译及理解 - - form.FormController、ngModel.NgModelController

野兽的ng api学习 -- form.FormController.ngModel.NgModelController form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. 方法: $addControl(); 给表单注册一个控制器. 使用了ngModelController的输入元素会在连接时自动执行. $removeControl(); 给表单注

@野兽的Angular Api 学习、翻译及理解 - - angular.module

@野兽的 ng api 学习 -- angular.module angular.module 创建一个全局的可用于检索和注入的Angular模块.所有Angular模块(Angular核心模块或者第三方模块)想要在应用里实现,都需要使用这个注入机制. 格式:angular.module(name,[requires],[configFn]); name :  string  创建的模块名称. [requires]: 字符串的数组  代表该模块依赖的其他模块列表,如果不依赖其他模块,则为空数组.

野兽的Angular Api 学习、翻译及理解 - - ngRoute Angular自带的路由

野兽的ng api学习 -- ngRoute ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信息. controller:字符串或函数,指定控制器. controllerAs:一个用于控制器的标识符名称.. template:字符串或函数,html模板. templateUrl:字符串或函数,html模板的地址. resolve:对象,一个可选的

野兽的Angular Api 学习、翻译及理解 - - $templateCache 和 $templateRequest

野兽的ng api学习 -- $templateCache 和 $templateRequest $templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索.你可以直接将模板标签加载到缓存中,或者通过$templateCache服务. 通过script标签: <script type=”text/ng-template” id=”template.html”> <p>This is the content of the template</p> &

野兽的Angular Api 学习、翻译及理解 - - $q 承诺与延迟

野兽的ng api学习 -- $q $q 一个帮助处理异步执行函数的服务.当他们做完处理时,使用它们的返回值(或异常). 受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用. $q的两种方式---这是一个更类似于Kris Kowal Q或jQuery的递延实现,另一种在一定程度上类似的ES6承诺. Deferred Api 一个被$q.defer()调用的deferred的新实例. deferred对象的目的是暴露相关承诺实例,以及APIs被执行的成功

野兽的Angular Api 学习、翻译及理解 - - $animate

野兽的ng api学习 -- $animate $animate $animate服务提供了基本的DOM操作功能如在DOM里插入.移除和移动元素,以及添加和删除类.这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的动画. $animate在Angular核心都是有效的,无论如何,这个服务为了支持所有动画须包含ngAnimate模块.否则,$animate只能做简单的DOM操作. 方法: enter(element,parent,after,[done]); 在D

野兽的Angular Api 学习、翻译及理解 - - ngInclude、ngTransclude

野兽的 ng api 学习 - - ngInclude.ngTransclude 这2个都是HTML DOM嵌入指令 ngInclude 读取,编译和插入外部的HTML片段. 格式:ng-include=“value”<ng-include src=”value” onload=“ex”autoscroll=“str”></ng-include>  class=”ng-include:value” value:string类型  模板id或者模板url ex:表达式,载入的时候执行

野兽的Angular Api 学习、翻译及理解 - - ngIf、ngSwitch、ngHide/ngShow

野兽的 ng api 学习 - - ngIf.ngSwitch.ngHide/ngShow 在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ngIf ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作. 格式:ng-if=“value” value:表达式  返回结果为boolean类型. 使用代码:

野兽的Angular Api 学习、翻译及理解 - - ngReadonly、ngSelected、ngDisabled

野兽的 ng api 学习 - - ngReadonly.ngSelected.ngDisabled ngReadonly 该指令将input,textarea等文本输入设置为只读. HTML规范不允许浏览器保存类似readonly的布尔值属性.如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失.这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息. 格式:ng-readonly=“value” value:表达式   结果为