compile和link

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了compile和link相关的知识,希望对你有一定的参考价值。

angular.module(‘myApp‘,[])
 .directive(‘customTags‘,function () {
        return{
            restrict:‘ECMA‘,
            template:‘<div>{{user.id}}</div>‘,
            replace:true,
            compile:function (tElement,tAttrs,transclude) {
                //编译阶段
                console.log(tElement);
                console.log(tAttrs);
                console.log(transclude);
                //不需要scope,dom渲染前,dom在compile编译阶段改变dom结构
                tElement.append(angular.element(‘<div>{{user.name}}{{user.count}}</div>‘));
                console.log(‘customTags compile‘);
                return{
                    //表示在编译阶段之后,指令直接到子元素之前执行
                    pre:function preLink(scope,iElement,iAttrs,controller) {

                        console.log(‘preLink‘)
                    },
                    //表示在所有子元素指令都连接之后才运行
                    post:function postLink(scope,iElement,iAttrs,controller) {
                            iElement.on(‘click‘,function () {
                              scope.$apply(function () {
                                    scope.user.name=‘ddd‘;
                                    scope.user.count=++i;
                                });
                             });
                        console.log(‘postLink‘);
                    }
                };
                //可以直接返回postlink
                //return function () {
                 //   console.log(‘compile return fun‘);

            }
        }
 })
    .directive(‘customTags2‘,function () {
        return{
            restrict:‘ECMA‘,
           // template:‘<div>aaa</div>‘,
            replace:true,
            compile:function (tElement,tAttrs,transclude) {
                //编译阶段
                console.log(‘customTags2 compile‘);
                return{
                    //表示在编译阶段之后,指令直接到子元素之前执行
                    pre:function preLink() {
                        console.log(‘2preLink‘)
                    },
                    //表示在所有子元素指令都连接之后才运行
                    post:function postLink() {
                        console.log(‘2postLink‘)
                    }
                };
                //可以直接返回postlink
                //return function () {
                //   console.log(‘compile return fun‘);
                // }
            }
        }
    })
.controller(‘firstController‘,[‘$scope‘,function ($scope) {
       $scope.users=[
           {
              id:10,
               name:‘张三‘
           },
           {
               id:20,
               name:‘李四‘
           }
       ];
}]);

  

以上是关于compile和link的主要内容,如果未能解决你的问题,请参考以下文章

html compile()和link()函数

环境初始化 Build and Install the Apache Thrift IDL Compiler Install the Platform Development Tools(代码片段

16个必备的JavaScript代码片段

angularjs link compile与controller的区别详解,了解angular生命周期

directive(指令里的)的compile,pre-link,post-link,link,transclude

AngularJS指令中的compile与link函数解析