必须正确理解的---ng指令中的compile与link函数解析

这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦。

http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87%E4%BB%A4%E4%B8%AD%E7%9A%84compile%E4%B8%8Elink%E5%87%BD%E6%95%B0%E8%A7%A3%E6%9E%90/

 

开始分析之前,先让我们看看ng中是怎么样处理指令的.

当浏览器渲染一个页面时,本质上是读html标识,然后建立dom节点,当dom树创建完毕之后广播一个事件给我们.

当你在页面中使用script标签加载ng应用程序代码时,ng监听上面的dom完成事件,查找带有ng-app属性的元素.

当找到这样的元素之后,ng开始处理dom以这个元素的起点,所以假如ng-app被添加到html元素上,则ng就会从html元素开始处理dom.

从这个起点开始,ng开始递归查找所有子元素里面,符合应用程序里定义好的指令规则.

ng怎样处理指令其实是依赖于它定义时的对象属性的,你可以定义一个compile或者一个link函数,或者用pre-linkpost-link函数来代替link.

=========================

ng中,原始dom通常用来标识template element,所以我在定义compile函数参数时就用到了tElem名字,这个变量指向的就是template element

=========================

所以post-link(pre-link)函数的element参数对象是一个element实例而不是一个template element.

===========================

  • 如果你在定义指令的时候只使用了一个link函数,那么ng会把这个函数当成post-link来处理!!!!!!!!!!

时间: 2024-09-17 07:03:15

必须正确理解的---ng指令中的compile与link函数解析的相关文章

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

通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用

AngularJS之指令中controller与link(十二)

前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive></custom-directive> 脚本: angular .module('app',[]) .directive('customDirective', customDirective); function customDirective() { var directive = { r

Domino中的“代理”正确理解是什么?

问题描述 Domino中的"代理"正确理解是什么? 解决方案 解决方案二:在服务器端运行处理事务的程序解决方案三:一个或者多个数据库中执行特定任务的独立程序.服务器端,客户端都可以执行.解决方案四:Servlet解决方案五:....引用2楼cape114的回复: 一个或者多个数据库中执行特定任务的独立程序.服务器端,客户端都可以执行. 解决方案六:引用4楼zyy8023ych的回复: ....引用2楼cape114的回复:一个或者多个数据库中执行特定任务的独立程序.服务器端,客户端都可

在React框架中实现一些AngularJS中ng指令的例子_AngularJS

首先设定一段Angularjs代码的ng-class: <i class="header-help-icon down" ng-class="{up:showMenu}"></i>   比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面      <i classNa

正确理解PHP常见的错误信息

我们编写程序时,无论怎样小心谨慎,犯错总是在所难免的.这些错误通常会迷惑PHP编译器.如果开发人员无法了解编译器报错信息的含义,那么这些错误信息不仅毫无用处,还会常常让人感到沮丧. 编译PHP脚本时,PHP编译器会尽其所能报告它遇到的第一个问题.这样就产生一个问题:只有当错误出现时,PHP才能将它识别出来(本文后面对此问题进行了详细描述).正是由于这个缘故,编译器指出出错的那行,从表面上看来可能语法正确无误,或者可能是根本就不存在的一行! 更好地理解错误信息可以大大节省确定并改正错误内容所花费的

如何正确理解 PHP 的错误信息

错误 我们编写程序时,无论怎样小心谨慎,犯错总是在所难免的.这些错误通常会迷惑PHP编译器.如果开发人员无法了解编译器报错信息的含义,那么这些错误信息不仅毫无用处,还会常常让人感到沮丧. 编译PHP脚本时,PHP编译器会尽其所能报告它遇到的第一个问题.这样就产生一个问题:只有当错误出现时,PHP才能将它识别出来(本文后面对此问题进行了详细描述).正是由于这个缘故,编译器指出出错的那行,从表面上看来可能语法正确无误,或者可能是根本就不存在的一行! 更好地理解错误信息可以大大节省确定并改正错误内容所

如何正确理解PHP的错误信息

错误 我们编写程序时,无论怎样小心谨慎,犯错总是在所难免的.这些错误通常会迷惑PHP编译器.如果开发人员无法了解编译器报错信息的含义,那么这些错误信息不仅毫无用处,还会常常让人感到沮丧. 编译PHP脚本时,PHP编译器会尽其所能报告它遇到的第一个问题.这样就产生一个问题:只有当错误出现时,PHP才能将它识别出来(本文后面对此问题进行了详细描述).正是由于这个缘故,编译器指出出错的那行,从表面上看来可能语法正确无误,或者可能是根本就不存在的一行! 更好地理解错误信息可以大大节省确定并改正错误内容所

正确理解动态网页制作技术PHP的错误信息

我们编写程序时,无论怎样小心谨慎,犯错总是在所难免的.这些错误通常会迷惑PHP编译器.如果开发人员无法了解编译器报错信息的含义,那么这些错误信息不仅毫无用处,还会常常让人感到沮丧. 编译PHP脚本时,PHP编译器会尽其所能报告它遇到的第一个问题.这样就产生一个问题:只有当错误出现时,PHP才能将它识别出来(本文后面对此问题进行了详细描述).正是由于这个缘故,编译器指出出错的那行,从表面上看来可能语法正确无误,或者可能是根本就不存在的一行! 更好地理解错误信息可以大大节省确定并改正错误内容所花费的

正确理解PHP程序编译时的错误信息

编译|程序|错误     我们编写程序时,无论怎样小心谨慎,犯错总是在所难免的.这些错误通常会迷惑PHP编译器.如果开发人员无法了解编译器报错信息的含义,那么这些错误信息不仅毫无用处,还会常常让人感到沮丧. 编译PHP脚本时,PHP编译器会尽其所能报告它遇到的第一个问题.这样就产生一个问题:只有当错误出现时,PHP才能将它识别出来(本文后面对此问题进行了详细描述).正是由于这个缘故,编译器指出出错的那行,从表面上看来可能语法正确无误,或者可能是根本就不存在的一行! 更好地理解错误信息可以大大节省