angular之link和compile的区别

Posted 2023-04-05

compile函数的作用是对指令的模板进行转换。
link的作用是在模型和视图之间建立关联，包括在元素上注册事件监听。
scope在链接阶段才会被绑定到元素上，因此compile阶段操作scope会报错。
对于同一个指令的多个实例，compile只会执行一次；而link对于指令的每个实例都会执行一次。
一般只用link就够了。
如果自己编写的自定义的compile函数，自定义的link函数无效，因为compile函数应该返回一个link函数供后处理。 参考技术A NG中是怎么样处理指令的

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

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

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

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

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

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

所以这些函数的区别呢?为什么要使用它?以及什么时候使用它呢?

带着这些问题跟着我一步一步来解答这些迷团吧

一段代码

为了解释这些函数的区别,下面我将使用一个简单易懂的例子

1.如果您有任何的问题,请不要犹豫赶紧在下面加上你的评论吧.

看看下面一段html标签代码

复制代码
代码如下:

<level-one>
<level-two>
<level-three>
Hello
</level-three>
</level-two>
</level-one>

然后是一段js代码

复制代码
代码如下:

var app = angular.module('plunker', []);

function createDirective(name)
return function()
return
restrict: 'E',
compile: function(tElem,
tAttrs)
console.log(name + ': compile');
return

pre: function(scope, iElem, iAttrs)
console.log(name + ': pre link');
,
post:
function(scope, iElem, iAttrs)
console.log(name + ': post
link');







app.directive('levelOne', createDirective('levelOne'));
app.directive('levelTwo', createDirective('levelTwo'));
app.directive('levelThree', createDirective('levelThree'));

结果非常简单:让ng来处理三个嵌套指令,并且每个指令都有自己的complile,pre-link,post-link函数,每个函数都会在控制台里打印一行东西来标识自己.本回答被提问者采纳

angular js 中conpile与link应用与区别

   link方法是compile抛出来的一个方法

应用

app.directive("thumbNail",function(){
    return{
        restrict:"ACE",
        replace:true,
        templateUrl:"../tpl/tpl.html",
        compile:function(elem,attrs,transclude){
          //  dom dom 树的增删改查（此时dom树还未形成）
            console.log("编译阶段"); //只打印一次只执行一次
            return{
                pre:function(scope,elem,attrs,controller){

            //  dom dom 树的增删改查（此时dom树还未形成）实际上也打印了6次 相当于post-link方法

          
                    console.log("编译阶段1")

                },
                post:function(scope,elem,attrs,controller){ //相当于post-link方法
                    console.log("链接阶段") //绑定事件与数据(dom树已形成 )  每个实例都会执行一次
                }

            }
        }
        /*link:function(scope,elem,attrs){
            console.log(elem);
            angular.element(elem).find("a").eq(0).on("click",function(){
                alert("加入收藏")
            });
            angular.element(elem).find("a").eq(1).on("click",function(){
                alert("点击购买")
            })
        }*/
    }
});