这篇文章将为大家详细讲解有关angular指令中preLink和postLink函数的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。指令模板选项有complie和link两个字段，两者之间存在如下
这篇文章将为大家详细讲解有关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编译链接指令的顺序，用以下代码输出日志的方式来说明：
<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 compileb1 compileb2 compilee1 compiled1 compilea1 preLinkb1 preLinkb2 preLinkb2 postLinkb1 postLinke1 preLinke1 postLinkd1 preLinkd1 postLinka1 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 LovesueeeHey, I am child, and my parent is undefined由上可以，myParent指令的link是一个postLink函数，而这个函数将在myChild指令的preLink和postLink执行完之后才执行。所以scope.name = undefined。
关于“angular指令中preLink和postLink函数的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: angular指令中preLink和postLink函数的示例分析
本文链接: https://lsjlt.com/news/277235.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0