Angular.js中的compile pre-link post-link选项的个人理解
AngularJS的生命周期在AngularJS的生命周期中,分为编译和链接两个阶段。
这个阶段中的三个选项 compile pre-link post-link这个三个指令并不是完全能用得到,特别是compile,这个指令在实践中,并不会频繁的使用。但是理解这个三个指令的工作机制对于我们理解AngluarJS的生命周期和运作过程有非常重要的作用。 首先看看compilecompile意思是我们希望指令和数据在放入DOM前进行对DOM的操作,因为我们从上一节生命周期中知道,在没有链接之前,我们的DOM虽然生成了,但是我们可以修改DOM,例如添加或者删除节点。但是我们并不推荐这样做。 compile指令可以返回一个对象或者函数,这里我们可以利用Angular的DOM操作element来实现 angular.module('myApp',[]) .directive('myDirective',function(){ return{ compile:function(tEle,tAttrs,transcludeFn){ //这里进行DOM的操作 return function(scope,ele,attrs){ //在这里进行链接函数的链接 } } } });
再来看看Linklink指的是我们在compile执行完之后将作用域和DOM进行链接,一般我们指的link都是Postlink,因为如果你直接写Link指令就是默认变成postlink。 postlink的用法postlink是我们最经常用的一个选项,当然我们默认只会写上link,就是指postlink,他可以为我们链接作用域和编写业务和逻辑代码。 prelink的用法prelink应该是我们理解Angular中最难的一个选项,prelink会在Postlink之前执行,他在compile之后执行。在prelink中写的是我们在compile DOM操作之后但是又是在postlink执行的业务代码。 实例代码: angular.module('myApp',transcludeFn){ //这里进行DOM的操作 return { pre: function(scope,iElem,iAttrs){ console.log(name + ': pre link => ' + iElem.html()); },post: function(scope,iAttrs){ console.log(name + ': post link => ' + iElem.html()); } } } } }); compile pre-link post-link 执行的顺序首先应该是compile和pre-link是以此的执行的,他们执行完之后post-link才会执行。如果有多个嵌套的指令元素,那么compile 和pre-link会依次执行,而它们执行完后postlink才会执行。
传入compile pre-link post-link 的参数解析当compile 运行的时候,我们的DOM还会修改所以这里的参数都是模板 例如tEle tAttrs 当进入链接时pre-link传入的参数这时是还是tEle tAttrs 因为这里还是链接之前当然pros-link传入的作用域和元素都是实例我们用,iElement iAttrs scope 如果存在require引入新的作用域的话,我们会多一个controller的参数指向引入的控制器。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |