聊聊angular指令中的preLink和postLink函数

 2953

本篇文章给大家介绍一下angular指令中的preLinkpostLink函数。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。


聊聊angular指令中的preLink和postLink函数


指令模板选项有complie和link两个字段,两者之间存在如下关系:

当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段。

当compile不存在,link字段存在时,angular通过这样directive.compile = valueFn(directive.link);包装一层,使用用户定义的link字段。


而link分为preLink和postLink两个阶段,从link字段或者compile函数的返回值来看:

如果是函数,那么这样的link,会被认为是postLink。

如果是对象,那么link.pre作为preLink函数,link.post作为postLink函数。

app.directive('myDirective', function () {
    return {
        compile: function () {
            return {
                pre: function () {
                    console.log('preLink');
                },
                post: function () {
                    console.log('postLink');
                }
            }
        }
    }
});

我们的指令工厂返回的是一个函数,那么angular通过这样的包装 directive = { compile: valueFn(directive) },即该函数将作为指令对象的postLink函数,像这样:

app.directive('myDirective', function () {
    return function () {
        console.log('postLink');
    }
});

angular编译链接指令的顺序

为了看清angular编译链接指令的顺序,用以下代码输出日志的方式来说明:

<body ng-app="myApp">
    <A a1>
        <B b1 b2></B>
        <C>
            <E e1></E>
            <F>
              <G></G>
            </F>
        </C>
        <D d1></D>
    </A>
</body>
  
var app = angular.module('myApp', []);
var names = ['a1', 'b1', 'b2', 'e1', 'd1'];
  
names.forEach(function (name) {
    app.directive(name, function () {
        return {
            compile: function () {
                console.log(name + ' compile');
                return {
                    pre: function () {
                        console.log(name + ' preLink');
                    },
                    post: function () {
                        console.log(name + ' postLink');
                    }
                };
            }
        };
    });
});

输出:

a1 compile
b1 compile
b2 compile
e1 compile
d1 compile
a1 preLink
b1 preLink
b2 preLink
b2 postLink
b1 postLink
e1 preLink
e1 postLink
d1 preLink
d1 postLink
a1 postLink

可以看出:

所有的指令都是先compile,然后preLink,然后postLink。

节点指令的preLink是在所有子节点指令preLink,postLink之前,所以一般这里就可以通过scope给子节点传递一定的信息。

节点指令的postLink是在所有子节点指令preLink,postLink完毕之后,也就意味着,当父节点指令执行postLink时,子节点postLink已经都完成了,此时子dom树已经稳定,所以我们大部分dom操作,访问子节点都在这个阶段。

指令在link的过程,其实是一个深度优先遍历的过程,postLink的执行其实是一个回溯的过程。

节点上的可能有若干指令,在搜集的时候就会按一定顺序排列(通过byPriority排序),执行的时候,preLinks是正序执行,而postLinks则是倒序执行。

明白了这些以后,就要小心一些容易忽略的陷阱。

<body ng-app="myApp">
    <my-parent></my-parent>
</body>
  
var app = angular.module('myApp', []);
  
app.directive('myParent', function () {
    return {
        restrict: 'EA',
        template: '<div>{{greeting}}{{name}}'+
        '<my-child></my-child>'+
        '</div>',
        link: function(scope,elem,attr){
            scope.name = 'Lovesueee';
            scope.greeting = 'Hey, I am ';
        }
    };
});
app.directive('myChild', function () {
    return {
        restrict: 'EA',
        template: '<div>{{says}}</div>',
        link: function(scope,elem,attr){
            scope.says = 'Hey, I am child, and my parent is ' + scope.name;
        }
    };
});

结果子指令输出为undefined

Hey, I am Lovesueee
Hey, I am child, and my parent is undefined

由上可以,myParent指令的link是一个postLink函数,而这个函数将在myChild指令的preLink和postLink执行完之后才执行。所以scope.name = undefined。


本文网址:https://www.zztuku.com/index.php/detail-8883.html
站长图库 - 聊聊angular指令中的preLink和postLink函数
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐