原文:http://www.cnblogs.com/GoodPingGe/p/4361354.html

**************************************************************************************************************

在angularJs应用启动之前,它们是以HTML文本形式存在文本编辑器当中。应用启动会进行编译和链接,作用域会同HTML进行绑定。这个过程包含了两个阶段!

编译阶段

  在编译的阶段,angularJs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。在遍历的过程中,有可能一层套着一层,一直延深处遍历。一但遍历和编译完毕就会返回一个叫做模板函数的函数。在这个函数没被返回(return)之前我们可以对编译后的DOM树进行修改。通常情况下,如果设置了compile函数,说明我们希望在指令和实时数据被放到DOM中之前
进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。本质上,当我们设置
了link选项,实际上是创建了一个postLink() 链接函数,以便compile() 函数可以定义链接函数。编译函数(compile)负责对模板DOM进行转换。
链接函数(link)负责将作用域和DOM进行链接。

1.compile

  compile选项可以返回一个对象或函数。

compile函数自身不会经常去写,但是link函数经常被使用。请看下面的例子

我们写了一个DIV标签,定义了一个autohello的一个属性,属性值5.   我们想把 “小平你好的这几句话”输出5遍。我们定义个一个compile 的函数,里面进行了一些DOM操作。在angularJs里面内置了一个小型的jq,所以我们可以用jq的写法来操作。

  页面输出如下:

在最后return一个闭包函数,其实就是我们的所说的link函数。平常我们这样定义的compile函数很少用,多种写法,因为写起来比较复杂。

    有的同学还挺好奇的,你不是说最后返回的函数是link吗?我可以写多个link函数嘛?为了满足同学的好奇心,我们可以这样改写

然后输出:不起作用哦!!如果同时设置了这两个选项,那么会把compile
所返回的函数当作链接函数,而link选项本身则会被忽略。

  那如果我们注释掉compile函数呢?结果会怎样呢?

  结果得出:这个link起作用哦。因为compile被注释掉了

angularjs compile和link的更多相关文章

  1. angularjs compile vs link

    https://docs.angularjs.org/guide/directive https://docs.angularjs.org/api/ng/service/$compile https: ...

  2. angularjs指令中的compile与link函数详解(转)

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  3. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  4. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  5. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  6. AngularJS的指令(Directive) compile和link的区别及使用示例

    如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...

  7. Angularjs Directive - Compile vs. Link

    如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 hellobug  失去 ...

  8. angularjs compine和link的区别

    [译]ng指令中的compile与link函数解析 04 September 2014 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre ...

  9. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

随机推荐

  1. python 中的高级函数map()

    map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于list [1, 2 ...

  2. hibernate的一种报错

    Exception in thread "main" java.lang.NoClassDefFoundError: javax/tools/StandardJavaFileMan ...

  3. AngularJs的UI组件ui-Bootstrap分享(十)——Model

    Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...

  4. android小技巧(一)

      1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.AC ...

  5. 分享SQL Server 2012/2014内存数据库,AlwaysOn,参考教材与网上总结

    Sql Server 2012 高可用性的几种方案的比较,AlwaysOn优势何在 对Sql Server 2012 高可用性与灾难恢复的几种方案的比较,复制,集群,镜像优劣何在,新生技术Always ...

  6. 推荐记录片系列:Ultimate Factories系列和MegaStructures系列

    -_- 我刚刚看完记录片 <终极工厂:M1主战坦克> (Ultimate Factories: M-1 Tank) (2006), 决定推荐几个系列的记录片. →_→ 1993年后出厂的M ...

  7. Queue Reconstruction by Height

    Suppose you have a random list of people standing in a queue. Each person is described by a pair of ...

  8. 2016 2 - 23 arc中的所有权修饰符(_strong修饰符与_weak修饰符)

    一 _strong修饰符 1._strong修饰符是id类型和对象类型默认的所有权修饰符.如下: id obj = [[NSObject alloc] init];//在没用明确变量所有权修饰符时,会 ...

  9. 自定义 placeholder 文本颜色

    原文  http://zhuyujia.github.io/2016/01/custom-placeholder-text-color.html Css: ::-webkit-input-placeh ...

  10. ios网络请求特殊字符&处理

    原文地址:http://www.xuebuyuan.com/2039420.html CFURLCreateStringByAddingPercentEscapes 在作项目的的时候,一般都要用到网络 ...