compile函数与link函数用法

compile函数与link函数用法

compile和link函数用法？

• compile函数的作用是对指令的模板进行转换；
• link作用是在模型和视图之间建立关联，包括在元素上注册事件监听；
• scope在link阶段才会被绑定到元素上，因此compile阶段操scope会报错
• 对于同一个指令的多个实例，compile只会执行一次，而link对于指令的每个实例都会执行一次；
• 一般情况下我们只要编写link函数就够了(请看第二个例子)
• 请注意，如果你编写的自定义的compile函数的同时自定义的link函数无效，因为compile函数应该返回一个link函数供后续处理（请看第一个例子）

例子一，html内容：

        <hello></hello>
        <div altofhello="5">
            <p> 棒棒你好! </p>
        </div>

js里面：

var myModule = angular.module('myModule', []); 
myModule.directive('hello', function() {
    return {
        restrict:'EA', 
        template:'<div>Hi everyone !</div>', 
        replace:'true', 
        link : function(scope, element, attrs, controller) {
            element.on('mouseover', function() {
                // console.log('鼠标进入'); 
            })
        }
    }
}).directive('altofhello',function(){
    return {
        restrict : 'A',
        compile : function(element,attrs,transclude){
            console.log('指令编译。。。。');
            var tpl = element.children().clone();
            console.log(tpl);
            for(var i=0; i<attrs.altofhello-1; i++){
                element.append(tpl.clone());
            }
            return function(scope,element,attrs,controller){ //其实输出一个link函数,compile规定(不输出也不报错)
                console.log('指令链接....');
            }
        },
        link : function(){     //注意：这个link函数是没有用的，所以他们俩不同时使用
            console.log('我自己的link函数');
        }
    }
})

实例二:
html内容：

    <div ng-repeat="i in [1,2]">
        <div repeater="2">
            <p>你好，棒棒！</p>
        </div>
    </div>

js内容：

var myModule = angular.module('myModule',[]);
myModule.directive('repeater',function(){
    return {
        restrict : 'AE',
        compile : function(element,attrs,transclude){
            console.log('repeat ..... compile.....');      //控制台只输出1次
            //var tpl = element.children().clone();
            //for(var i=0; i<attrs.repeater-1; i++){
            //    element.append(tpl.clone());
            //}
            //返回link函数
            return function(scope,element,attrs,controller){
                console.log('repeat.......link.......');   //控制台执行2次
            }
        }

    }
})

github源码：compile函数与link函数用法