AngularJS学习之Link & Complie (一)
来源:互联网 发布:2010年总决赛数据 编辑:程序博客网 时间:2024/06/05 00:20
转自 http://developer.51cto.com/art/201403/431734.htm
Link函数和Scope
指令生成出的模板其实没有太多意义,除非它在特定的scope下编译。默认情况下,指令并不会创建新的子scope。更多的,它使用父scope。也就是说,如果指令存在于一个controller下,它就会使用这个controller的scope。 如何运用scope,我们要用到一个叫做 link 的函数。它由指令定义对象中的link属性配置。让我们来改变一下我们的 helloWorld 指令,当用户在一个输入框中输入一种颜色的名称时,Hello World 文字的背景色自动发生变化。同时,当用户在 Hello World 文字上点击时,背景色变回白色。 相应的HTML标记如下:
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color" /> <hello-world/> </body>
修改后的 helloWorld 指令如下:
app.directive('helloWorld', function() { return { restrict: 'AE', replace: true, template: '<p style="background-color:{{color}}">Hello World', link: function(scope, elem, attrs) { elem.bind('click', function() { elem.css('background-color', 'white'); scope.$apply(function() { scope.color = "white"; }); }); elem.bind('mouseover', function() { elem.css('cursor', 'pointer'); }); } }; });
我们注意到指令定义中的 link 函数。 它有三个参数:
- scope – 指令的scope。在我们的例子中,指令的scope就是父controller的scope。
- elem – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery,那么这个元素就是jQuery元素,而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了,所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。
- attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子,你给一个HTML元素添加了一些属性:,那么可以在 link 函数中通过 attrs.someAttribute 来使用它。
link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。在上面的指令代码片段中,我们添加了两个事件, click,和 mouseover。click 处理函数用来重置 <p> 的背景色,而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 {{color}},当父scope中的 color 发生变化时,它用来改变 Hello World 文字的背景色。 这个 plunker 演示了这些概念。
compile函数
compile 函数在 link 函数被执行之前用来做一些DOM改造。它接收下面的参数:
- tElement – 指令所在的元素
- attrs – 元素上赋予的参数的标准化列表
要注意的是 compile 函数不能访问 scope,并且必须返回一个 link 函数。但是如果没有设置 compile 函数,你可以正常地配置 link 函数,(有了compile,就不能用link,link函数由compile返回)。compile函数可以写成如下的形式:
- app.directive('test', function() {
- return {
- compile: function(tElem,attrs) {
- //do optional DOM transformation here
- return function(scope,elem,attrs) {
- //linking function here
- };
- }
- };
- });
大多数的情况下,你只需要使用 link 函数。这是因为大部分的指令只需要考虑注册事件监听、监视模型、以及更新DOM等,这些都可以在 link 函数中完成。 但是对于像 ng-repeat 之类的指令,需要克隆和重复 DOM 元素多次,在 link 函数执行之前由 compile 函数来完成。这就带来了一个问题,为什么我们需要两个分开的函数来完成生成过程,为什么不能只使用一个?要回答好这个问题,我们需要理解指令在Angular中是如何被编译的!
指令是如何被编译的
当应用引导启动的时候,Angular开始使用 $compile 服务遍历DOM元素。这个服务基于注册过的指令在标记文本中搜索指令。一旦所有的指令都被识别后,Angular执行他们的 compile 方法。如前面所讲的,compile 方法返回一个 link 函数,被添加到稍后执行的 link 函数列表中。这被称为编译阶段。如果一个指令需要被克隆很多次(比如 ng-repeat),compile函数只在编译阶段被执行一次,复制这些模板,但是link 函数会针对每个被复制的实例被执行。所以分开处理,让我们在性能上有一定的提高。这也说明了为什么在 compile 函数中不能访问到scope对象。 在编译阶段之后,就开始了链接(linking)阶段。在这个阶段,所有收集的 link 函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理,然后返回具有事件响应的真实的DOM节点。
- AngularJS学习之Link & Complie (一)
- AngularJS的生命周期:complie和link
- angular指令之complie和link不得不说的故事
- AngularJS学习之路(一)AngularJS简单操作
- 谈谈关于angularjs指令中complie函数和link函数的理解
- AngularJs学习之路(一)
- 自定义指令[directive,link,complie]
- AngularJS学习(一)
- AngularJS学习(一)
- AngularJS学习(一)
- angularjs学习(一)
- AngularJS学习(一)------AngularJS简介
- angularJS学习之路(一)---开始入门
- JavaScript框架之AngularJS学习——指令(一)
- AngularJS 学习 (一)Start
- AngularJS学习笔记(一)
- AngularJS 学习笔记(一)
- AngularJS学习笔记(一)
- HDU
- Sublime Text3配置python交互模式
- UI设计师简历填写小技巧
- Linux常用命令(持续更新中)
- Android Studio 运行出现 Error:Execution failed for task ':app:transformResourcesWithMergeJavaResForDebug
- AngularJS学习之Link & Complie (一)
- git使用笔记(创建和合并分支)
- 基于libyuv库的NV12格式图片的缩放
- 复杂链表的赋值
- iOS10.3新特性图文介绍
- hdu n皇后问题 dfs打表
- Android零基础入门第3节:带你一起来聊一聊Android开发环境
- C++动态内存分配
- http://code.alibabatech.com/schema/dubbo/dubbo.xsd 在xml报错解决方案