compile && link属性

Angularjs 指令编译三阶段

标准浏览器API转化
将html转化成dom，所以⾃自定义的html标签必须符合html 的格式
Angular compile
搜索匹配directive，按照priority排序，并执行directive上的compile方法
Angular link
执行directive上的link方法，进⾏行scope绑定及事件绑定

为什么编译的过程要分成compile和link?

简单的说就是为了解决性能问题，特别是那种model变化会影响dom结构变化的，而变化的结构还会有新的scope绑定及事件绑定，比如ng-repeat。

compile和link的使用时机

compile
想在dom渲染前对它进行变形，并且不需要scope参数想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好返回值就是link的function，这时就是共同使用的时候
link
对特定的元素注册事件需要用到scope参数来实现dom元素的一些行为

compile

complie:function(tElement,tAttrs,transclude)
complie函数用来对模版自身进行转换，仅仅在编译阶段运行一次
complie中直接返回的函数是postLink，表示link参数需要执⾏行的函数，也可以返回一个对象⾥里⾯面包含preLink和postLink

link

link(scope,iElement,iAttrs,controller)
link参数代表的是complie返回的postLink
preLink 表示在编译阶段之后，指令连接到子元素之前运行
postLink 表示会在所有子元素指令都连接之后才运⾏行
link函数负责在模型和视图之间进行动态关联，对于每个指令的每个实例，link函数都会执行一次

例子：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">
        <!--
            1. div 转换为dom结构
            2. 默认的优先级为0,哪个先定义哪个先使用

        -->
        <div ng-repeat="user in users" custom-tags="" custom-tags2>

        </div>

    </div>
</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>

app/index.js

var i = 0;

var myApp = angular.module('myApp', [])

    .directive('customTags',function(){
        return {
            restrict : 'ECAM',
            template : '<div>{{user.name}}</div>',
            replace : true,
            compile:function(tElement,tAttrs,transclude){

                tElement.append(angular.element('<div>{{user.name}}{{user.count}}</div>'));

                // 编译阶段...
                console.log('customTags compile 编译阶段...');

                return {
                    // 表示在编译阶段之后，指令连接到子元素之前运行
                    pre:function preLink(scope,iElement,iAttrs,controller){
                        console.log('customTags preLink..')
                    },
                    // 表示在所有子元素指令都连接之后才运行
                    post:function postLink(scope,iElement,iAttrs,controller){

                        iElement.on('click',function(){
                            scope.$apply(function(){
                                scope.user.name = 'click after';
                                scope.user.count = ++i;
                                // 进行一次 脏检查
                            });
                        })

                        console.log('customTags all child directive link..')
                    }
                }
                // 可以直接返回 postLink
                // return postLink function(){
                    // console.log('compile return fun');
                //}
            },
            // 此link表示的就是 postLink
            link:function(){
//                iElement.on('click',function(){
//                    scope.$apply(function(){
//                        scope.user.name = 'click after';
//                        scope.user.count = ++i;
//                        // 进行一次 脏检查
//                    });
//                })
            }
        }
    })

    .directive('customTags2',function(){
        return {
            restrict : 'ECAM',
            replace : true,
            compile:function(){
                // 编译阶段...
                console.log('customTags2 compile 编译阶段...');

                return {
                    // 表示在编译阶段之后，指令连接到子元素之前运行
                    pre:function preLink(){
                        console.log('customTags2 preLink..')
                    },
                    // 表示在所有子元素指令都连接之后才运行
                    post:function postLink(){
                        console.log('customTags2 all child directive link..')
                    }
                }

            }
        }
    })


    .directive('customTags3',function(){

       // return postLink;
       return function(){

       }
    })

    .controller('firstController', ['$scope', function ($scope) {
        $scope.users = [
            {
                id:10,
                name:'张三'
            },
            {
                id:20,
                name:'李四'
            }
        ];
    }]);

Previoustransclude、priority、terminal属性 Nextcontroller && controllAs属性

Last updated 6 years ago

Was this helpful?

compile和link的使用时机

compile

想在dom渲染前对它进行变形，并且不需要scope参数想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好返回值就是link的function，这时就是共同使用的时候

link

对特定的元素注册事件需要用到scope参数来实现dom元素的一些行为

link

link(scope,iElement,iAttrs,controller)

link参数代表的是complie返回的postLink

preLink 表示在编译阶段之后，指令连接到子元素之前运行

postLink 表示会在所有子元素指令都连接之后才运⾏行

link函数负责在模型和视图之间进行动态关联，对于每个指令的每个实例，link函数都会执行一次

例子：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">
        <!--
            1. div 转换为dom结构
            2. 默认的优先级为0,哪个先定义哪个先使用

        -->
        <div ng-repeat="user in users" custom-tags="" custom-tags2>

        </div>

    </div>
</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>

app/index.js

var i = 0;

var myApp = angular.module('myApp', [])

    .directive('customTags',function(){
        return {
            restrict : 'ECAM',
            template : '<div>{{user.name}}</div>',
            replace : true,
            compile:function(tElement,tAttrs,transclude){

                tElement.append(angular.element('<div>{{user.name}}{{user.count}}</div>'));

                // 编译阶段...
                console.log('customTags compile 编译阶段...');

                return {
                    // 表示在编译阶段之后，指令连接到子元素之前运行
                    pre:function preLink(scope,iElement,iAttrs,controller){
                        console.log('customTags preLink..')
                    },
                    // 表示在所有子元素指令都连接之后才运行
                    post:function postLink(scope,iElement,iAttrs,controller){

                        iElement.on('click',function(){
                            scope.$apply(function(){
                                scope.user.name = 'click after';
                                scope.user.count = ++i;
                                // 进行一次 脏检查
                            });
                        })

                        console.log('customTags all child directive link..')
                    }
                }
                // 可以直接返回 postLink
                // return postLink function(){
                    // console.log('compile return fun');
                //}
            },
            // 此link表示的就是 postLink
            link:function(){
//                iElement.on('click',function(){
//                    scope.$apply(function(){
//                        scope.user.name = 'click after';
//                        scope.user.count = ++i;
//                        // 进行一次 脏检查
//                    });
//                })
            }
        }
    })

    .directive('customTags2',function(){
        return {
            restrict : 'ECAM',
            replace : true,
            compile:function(){
                // 编译阶段...
                console.log('customTags2 compile 编译阶段...');

                return {
                    // 表示在编译阶段之后，指令连接到子元素之前运行
                    pre:function preLink(){
                        console.log('customTags2 preLink..')
                    },
                    // 表示在所有子元素指令都连接之后才运行
                    post:function postLink(){
                        console.log('customTags2 all child directive link..')
                    }
                }

            }
        }
    })


    .directive('customTags3',function(){

       // return postLink;
       return function(){

       }
    })

    .controller('firstController', ['$scope', function ($scope) {
        $scope.users = [
            {
                id:10,
                name:'张三'
            },
            {
                id:20,
                name:'李四'
            }
        ];
    }]);