이 글에서는 angular 명령의 preLink 및 postLink 기능을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
【관련 추천: "angular Tutorial"】
명령 템플릿 옵션에는 컴파일과 링크라는 두 가지 필드가 있습니다. 두 필드 사이에는 다음과 같은 관계가 있습니다.
angular이렇게 하면directive.compile = valueFn(directive.link);하나의 레이어를 래핑하고 사용자 정의 링크 필드를 사용합니다. angular通过这样directive.compile = valueFn(directive.link);包装一层，使用用户定义的link字段。而link分为preLink和postLink两个阶段，从link字段或者compile函数的返回值来看：
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 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树已经稳定
함수인 경우 해당 링크는 postLink로 간주됩니다.
<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;
}
};
});directive = { compile: valueFn(directive) } 즉, 이 함수는 다음과 같이 명령 개체의 postLink 함수로 사용됩니다. Hey, I am Lovesueee Hey, I am child, and my parent is undefined
rrreee
출력:rrreee
볼 수 있습니다:위 내용은 각도 지시문의 preLink 및 postLink 함수에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
