>  기사  >  웹 프론트엔드  >  각도 지시문의 preLink 및 postLink 함수에 대해 이야기해 보겠습니다.

각도 지시문의 preLink 및 postLink 함수에 대해 이야기해 보겠습니다.

青灯夜游
青灯夜游앞으로
2021-05-19 10:08:012839검색

이 글에서는 angular 명령의 preLink 및 postLink 기능을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

각도 지시문의 preLink 및 postLink 함수에 대해 이야기해 보겠습니다.

【관련 추천: "angular Tutorial"】

명령 템플릿 옵션에는 컴파일과 링크라는 두 가지 필드가 있습니다. 두 필드 사이에는 다음과 같은 관계가 있습니다.

  • 컴파일 필드가 존재하는 경우 링크 필드가 무시되면 컴파일 함수의 반환 값이 링크 필드로 사용됩니다.
  • 컴파일이 존재하지 않고 링크 필드가 존재하는 경우 angular이렇게 하면directive.compile = valueFn(directive.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(&#39;myApp&#39;, []);
var names = [&#39;a1&#39;, &#39;b1&#39;, &#39;b2&#39;, &#39;e1&#39;, &#39;d1&#39;];
 
names.forEach(function (name) {
  app.directive(name, function () {
    return {
        compile: function () {
             console.log(name + &#39; compile&#39;);
            return {
                pre: function () {
                    console.log(name + &#39; preLink&#39;);
                },
                post: function () {
                    console.log(name + &#39; postLink&#39;);
                }
            };
        }
    };
  });
});

输出:

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树已经稳定

  • 링크는 preLink와 postLink의 두 단계로 구분됩니다. 링크 필드 또는 컴파일 함수의 반환 값으로 판단하면

  • 함수인 경우 해당 링크는 postLink로 간주됩니다.

  • 객체인 경우 link.pre는 preLink 함수 역할을 하고 link.post는 postLink 함수 역할을 합니다.


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

    우리의 명령어 팩토리는 함수를 반환한 후, Angle은 이를 directive = { compile: valueFn(directive) } 즉, 이 함수는 다음과 같이 명령 개체의 postLink 함수로 사용됩니다.
  • Hey, I am Lovesueee
    Hey, I am child, and my parent is undefined

    Angular 컴파일 및 링크 명령의 순서

각도 컴파일 및 링크 지침의 순서를 명확하게 확인하세요. 순서는 다음 코드 출력 로그로 설명됩니다.

rrreee

출력:

rrreee

볼 수 있습니다:

    모든 지침이 먼저 컴파일되고, 그 다음 preLink, 그 다음 postLink가 컴파일됩니다.

    🎜🎜노드 명령어의 preLink는 모든 하위 노드의 preLink 및 postLink 명령어 앞에 있으므로 일반적으로 여기에서 범위를 통해 특정 정보를 하위 노드에 전달할 수 있습니다. 🎜🎜🎜🎜🎜노드 명령어의 postLink는 모든 하위 노드 명령어 preLink 및 postLink가 완료된 후입니다. 즉, 상위 노드 명령어가 postLink를 실행할 때 하위 노드 postLink가 이때 완료되었음을 의미합니다. line -height:1.8; 수직 정렬:top; 여백:0px!important; 글꼴 계열:Consolas,'Liberation Mono',Menlo,Courier,monospace!important; ; color:rgb(234,23,23)!important">하위 DOM 트리가 안정화되었습니다. 따라서 대부분의 DOM 작업과 하위 노드에 대한 액세스가 이 단계에 있습니다. 🎜🎜🎜🎜🎜링크 명령의 프로세스는 실제로 깊이 우선 순회 프로세스이고, postLink의 실행은 실제로 역추적 프로세스입니다. 🎜🎜🎜🎜🎜노드에는 여러 가지 명령이 있을 수 있으며 수집 시 특정 순서로 정렬됩니다(우선 순위 기준으로 정렬). 실행 시 preLink는 정방향으로 실행되고 postLink는 역순으로 실행됩니다. 🎜🎜🎜🎜🎜이 점을 이해한 후에는 간과하기 쉬운 함정에 주의해야 합니다. 🎜rrreee🎜결과 하위 명령 출력이 정의되지 않았습니다🎜rrreee🎜 위에서 보면 myParent 명령어의 링크는 postLink 함수이며, 이 함수는 myChild 명령어의 preLink 및 postLink가 실행된 후에 실행됩니다. 따라서 범위.이름 = 정의되지 않았습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 각도 지시문의 preLink 및 postLink 함수에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제