首頁 > 文章 > web前端 > 聊聊angular指令中的preLink和postLink函數

聊聊angular指令中的preLink和postLink函數

青灯夜游轉載: 2021-05-19 10:08:012815瀏覽

本篇文章跟大家介紹一下angular指令中的preLink和postLink函數。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

【相關推薦：《angular教學》】

指令範本選項有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(&#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樹已經穩定，所以我們大部分dom操作，訪問子節點都在這個階段。
指令在link的過程，其實是一個深度優先遍歷的過程，postLink的執行其實是一個回溯的過程。
節點上的可能有若干指令，在蒐集的時候就會按一定順序排列（透過byPriority排序），執行的時候，preLinks是正序執行，而postLinks則是倒序執行。

明白了這些以後，就要小心一些容易忽略的陷阱。

<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;
        }
    };
});

結果子指令輸出為undefined

Hey, I am Lovesueee
Hey, I am child, and my parent is undefined

由上可以，myParent指令的link是一個postLink函數，而這個函數將在myChild指令的preLink和postLink執行完之後才執行。所以scope.name = undefined。

更多程式相關知識，請造訪：程式設計入門！！

以上是聊聊angular指令中的preLink和postLink函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！

angular undefined 对象 dom

陳述：

本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：淺談Nodejs中的callback回調下一篇：淺談Nodejs中的callback回調

看更多