이 글에서는 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; } }; });우리의 명령어 팩토리는 함수를 반환한 후, Angle은 이를
directive = { compile: valueFn(directive) }
즉, 이 함수는 다음과 같이 명령 개체의 postLink 함수로 사용됩니다. Hey, I am Lovesueee Hey, I am child, and my parent is undefined
rrreee
출력:rrreee
볼 수 있습니다:위 내용은 각도 지시문의 preLink 및 postLink 함수에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!