angular js 中conpile与link应用与区别

Posted 2020-09-18 yaomengli

   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("点击购买")
            })
        }*/
    }
});