指令的Link函数和Scope
指令生成出的模板其实没有太多意义,除非它在特定的scope下编译。默认情况下,指令并不会创建新的子scope。更多的,它使用父scope。也就是说,如果指令存在于一个controller下,它就会使用这个controller的scope。 如何运用scope,我们要用到一个叫做 link 的函数。它由指令定义对象中的link属性配置。让我们来改变一下我们的 helloWorld 指令,当用户在一个输入框中输入一种颜色的名称时,Hello World 文字的背景色自动发生变化。同时,当用户在 Hello World 文字上点击时,背景色变回白色。 相应的HTML标记如下:
<body ng-controller="MainCtrl">
- scope – 指令的scope。在我们的例子中,指令的scope就是父controller的scope。
- elem – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery,那么这个元素就是jQuery元素,而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了,所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。
- attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子,你给一个HTML元素添加了一些属性:,那么可以在 link 函数中通过 attrs.someAttribute 来使用它。
compile函数
compile 函数在 link 函数被执行之前用来做一些DOM改造。它接收下面的参数:
- tElement – 指令所在的元素
- attrs – 元素上赋予的参数的标准化列表
要注意的是 compile 函数不能访问 scope,并且必须返回一个 link 函数。但是如果没有设置 compile 函数,你可以正常地配置 link 函数,(有了compile,就不能用link,link函数由compile返回)。compile函数可以写成如下的形式:
app.directive('test', function() {
指令是如何被编译的
当应用引导启动的时候,Angular开始使用 $compile 服务遍历DOM元素。这个服务基于注册过的指令在标记文本中搜索指令。一旦所有的指令都被识别后,Angular执行他们的 compile 方法。如前面所讲的,compile 方法返回一个 link 函数,被添加到稍后执行的 link 函数列表中。这被称为编译阶段。如果一个指令需要被克隆很多次(比如 ng-repeat),compile函数只在编译阶段被执行一次,复制这些模板,但是link 函数会针对每个被复制的实例被执行。所以分开处理,让我们在性能上有一定的提高。这也说明了为什么在 compile 函数中不能访问到scope对象。 在编译阶段之后,就开始了链接(linking)阶段。在这个阶段,所有收集的 link 函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理,然后返回具有事件响应的真实的DOM节点。
改变指令的Scope
默认情况下,指令获取它父节点的controller的scope。但这并不适用于所有情况。如果将父controller的scope暴露给指令,那么他们可以随意地修改 scope 的属性。在某些情况下,你的指令希望能够添加一些仅限内部使用的属性和方法。如果我们在父的scope中添加,会污染父scope。 其实我们还有两种选择:
- 一个子scope – 这个scope原型继承子父scope。
- 一个隔离的scope – 一个孤立存在不继承自父scope的scope。
这样的scope可以通过指令定义对象中 scope 属性来配置。下面的代码片段是一个例子:
app.directive('helloWorld', function() {
上面的代码,让Angular给指令创建一个继承自父socpe的新的子scope。 另外一个选择,隔离的scope:
指令的Link函数和Scope的更多相关文章
- AngularJS指令嵌套时link函数执行顺序的问题
今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...
- angularjs指令中的compile与link函数详解(转)
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- 必须正确理解的---ng指令中的compile与link函数解析
这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...
- angular中的compile和link函数
angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
随机推荐
- Python实战:扫描key完整性
之前在国际版本中,需要支持中英文切换功能,在如此繁多的源文件里要查找源文件里的key是语言资源包是否对应. 正好运用在之前学的python,写了个工具,支持自定义替换标签,批量处理源文件.现在看来,效 ...
- ZK 页面间参数传递
1.execution.sendRedirect(url) 当使用方法execution.sendRedirect(url)进行页面跳转时,在url中添加参数:url?test=5: 跳转页面获取参数 ...
- Unity3D DFGUI根据名称获取多个子控件代码
dfPanel control = gameObject.GetComponent<dfPanel>(); dfLabel avatarName = control.Find<dfL ...
- php文件写入PHP_EOL与FILE_APPEND
PHP_EOL 换行符 unix系列用 \n windows系列用 \r\n mac用 \r PHP中可以用PHP_EOL来替代,以提高代码的源代码级可移植性 FILE_APPEND 用于文本追加 ...
- Mac 系统环境变量配置
Mac 系统环境变量配置 例如这里要配置一下 QUICK_V3_ROOT 的环境变量 1.打开终端 输入 vim ~/.bash_profile 2.一直回车 知道出现以下选项 按 E 编辑 ...
- python UnicodeDecodeError: 'ascii' codec can't decode byte 0xa6 in position 907: ordinal not in range(128)
import sysreload(sys)sys.setdefaultencoding('utf-8')
- can't resolve symbol 'R' ...
in android studio IDE: 解决: Tools -> Android -> Sync Project with Gradle Files
- WireShar使用笔记
1.下载wiresharp 官网下载 2.安装 安装后直接支持中文 很人性化哦 注意:一定要安装WinPcap 不然无法使用 3.
- Go语言的GOPATH与工作目录详解
这篇文章主要介绍了Go语言的GOPATH与工作目录详解,本文详细讲解了GOPATH设置.应用目录结构.编译应用等内容,需要的朋友可以参考下 GOPATH设置 go 命令依赖一个重要的环境变量:$GOP ...
- iOS程序上传流程 2014年9月最新版
程序上传步骤: 1.登录账户,点击Manage Your Apps 2.点击Add New App 3.注册Bundle ID,点击蓝色的here 4.进入了注册页面,首先要填写App ID的一个描述 ...