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

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

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

이 글에서는 angular 명령의 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(&#39;myDirective&#39;, function () {
  return {
      compile: function () {
          return {
              pre: function () {
                  console.log(&#39;preLink&#39;);
              },
              post: function () {
                  console.log(&#39;postLink&#39;);
              }
          }
      }
  }
});

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

app.directive(&#39;myDirective&#39;, function () {
  return function () {
    console.log(&#39;postLink&#39;);
  }
});

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树已经稳定
함수인 경우 해당 링크는 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 및 postLink 함수에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

angular undefined 对象 dom

성명：

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

이전 기사：Nodejs의 콜백에 대한 간략한 토론다음 기사：Nodejs의 콜백에 대한 간략한 토론