AngularJS的生命周期:complie和link

1、编译阶段
第一个阶段是编译阶段。在编译阶段, AngularJS会遍历整个HTML文档并根据JavaScript中的指令定义来处理页面上声明的指令。
一旦对指令和其中的子模板进行遍历或编译,编译后的模板会返回一个叫做模板函数的函数。我们有机会在指令的模板函数被返回前,对编译后的DOM树进行修改。
在这个时间点DOM树还没有进行数据绑定,意味着如果此时对DOM树进行操作只会有很少的性能开销。基于此点, ng-repeat和ng-transclude等内置指令会在这个时候,也就是还未与任何作用域数据进行绑定时对DOM进行操作。

2、compile(对象或函数)
compile选项可以返回一个对象或函数。
compile选项本身并不会被频繁使用,但是link函数则会被经常使用。本质上,当我们设置了link选项,实际上是创建了一个postLink()链接函数,以便compile()函数可以定义链接函数。
通常情况下,如果设置了compile函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。
注:compile和link选项是互斥的。如果同时设置了这两个选项,那么会把compile所返回的函数当作链接函数,而link选项本身则会被忽略。
不要进行DOM事件监听器的注册:这个操作应该在链接函数中完成。

compile: function(tEle, tAttrs, transcludeFn) {    
var tplEl = angular.element('<div>' +'<h2></h2>' +'</div>');    
var h2 = tplEl.find('h2');    
h2.attr('type', tAttrs.type);    
h2.attr('ng-model', tAttrs.ngModel);    
h2.val("hello");    
tEle.replaceWith(tplEl);        
return function(scope, ele, attrs) {        // 连接函数    };}

编译函数负责对模板DOM进行转换。
链接函数负责将作用域和DOM进行链接。


3、链接
用link函数创建可以操作DOM的指令。
链接函数是可选的。如果定义了编译函数,它会返回链接函数,因此当两个函数都定义了时,编译函数会重载链接函数。如果我们的指令很简单,并且不需要额外的设置,可以从工厂函数 (回调函数)返回一个函数来代替对象。如果这样做了,这个函数就是链接函数。

**下面两种定义指令的方式在功能上是完全一样的:
**angular.module('myApp', [])
.directive('myDirective', function() {   
    return {      
        pre: function(tElement, tAttrs, transclude) {      
               // 在子元素被链接之前执行  
               // 在这里进行Don转换不安全      
               // 之后调用'lihk'h函数将无法定位要链接的元素     
         },      
        post: function(scope, iElement, iAttrs, controller) {    
               // 在子元素被链接之后执行       
               // 如果在这里省略掉编译选项       
               //在这里执行DOM转换和链接函数一样安全吗    
        }   
    };
});

angular.module('myApp', [])
    .directive('myDirective', function() {  
           return {      
                link: function(scope, ele, attrs) {       
                      return {            
                            pre: function(tElement, tAttrs, transclude) {      
                                   // 在子元素被链接之前执行             
                                   // 在这里进行Don转换不安全            
                                   // 之后调用'lihk'h函数将无法定位要链接的元素     
                            }, 
                            post: function(scope, iElement, iAttrs, controller) {    
                                    // 在子元素被链接之后执行              
                                   // 如果在这里省略掉编译选项           
                                   //在这里执行DOM转换和链接函数一样安全吗    
                             }   
                       }  
               }
        }
});

下面看一下链接函数中的参数:
scope
指令用来在其内部注册监听器的作用域。
iElement
iElement参数代表实例元素,指使用此指令的元素。在postLink函数中我们应该只操作此元素的子元素,因为子元素已经被链接过了。
iAttrs
iAttrs参数代表实例属性,是一个由定义在元素上的属性组成的标准化列表,可以在所有指令的链接函数间共享。会以javascript对象的形式进行传递。
controller
controller 参 数 指 向 require 选 项 定 义 的 控 制 器 。 如 果 没 有 设 置 require 选 项 , 那 么controller参数的值为undefined。
控制器在所有的指令间共享,因此指令可以将控制器当作通信通道(公共API)。如果设置了多个require,那么这个参数会是一个由控制器实例组成的数组,而不只是一个单独的控制器。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容