angular指令中preLink和postLink函數(shù)的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)angular指令中preLink和postLink函數(shù)的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比鳳泉網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式鳳泉網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鳳泉地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

指令模板選項(xiàng)有complie和link兩個(gè)字段，兩者之間存在如下關(guān)系：

  • 當(dāng)compile字段存在時(shí)，link字段將被忽略，compile函數(shù)的返回值將作為link字段。

  • 當(dāng)compile不存在，link字段存在時(shí)，angular通過(guò)這樣directive.compile = valueFn(directive.link);包裝一層，使用用戶定義的link字段。

而link分為preLink和postLink兩個(gè)階段，從link字段或者compile函數(shù)的返回值來(lái)看：

  • 如果是函數(shù)，那么這樣的link，會(huì)被認(rèn)為是postLink。

  • 如果是對(duì)象，那么link.pre作為preLink函數(shù)，link.post作為postLink函數(shù)。

app.directive('myDirective', function () {
  return {
      compile: function () {
          return {
              pre: function () {
                  console.log('preLink');
              },
              post: function () {
                  console.log('postLink');
              }
          }
      }
  }
});

我們的指令工廠返回的是一個(gè)函數(shù)，那么angular通過(guò)這樣的包裝  directive = { compile: valueFn(directive) }，即該函數(shù)將作為指令對(duì)象的postLink函數(shù)，像這樣：

app.directive('myDirective', function () {
  return function () {
    console.log('postLink');
  }
});
angular編譯鏈接指令的順序

為了看清angular編譯鏈接指令的順序，用以下代碼輸出日志的方式來(lái)說(shuō)明：

<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。

  • 節(jié)點(diǎn)指令的preLink是在所有子節(jié)點(diǎn)指令preLink，postLink之前，所以一般這里就可以通過(guò)scope給子節(jié)點(diǎn)傳遞一定的信息。

  • 節(jié)點(diǎn)指令的postLink是在所有子節(jié)點(diǎn)指令preLink，postLink完畢之后，也就意味著，當(dāng)父節(jié)點(diǎn)指令執(zhí)行postLink時(shí)，子節(jié)點(diǎn)postLink已經(jīng)都完成了，此時(shí)子dom樹已經(jīng)穩(wěn)定，所以我們大部分dom操作，訪問(wèn)子節(jié)點(diǎn)都在這個(gè)階段。

  • 指令在link的過(guò)程，其實(shí)是一個(gè)深度優(yōu)先遍歷的過(guò)程，postLink的執(zhí)行其實(shí)是一個(gè)回溯的過(guò)程。

  • 節(jié)點(diǎn)上的可能有若干指令，在搜集的時(shí)候就會(huì)按一定順序排列（通過(guò)byPriority排序），執(zhí)行的時(shí)候，preLinks是正序執(zhí)行，而postLinks則是倒序執(zhí)行。

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

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

結(jié)果子指令輸出為undefined

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

由上可以，myParent指令的link是一個(gè)postLink函數(shù)，而這個(gè)函數(shù)將在myChild指令的preLink和postLink執(zhí)行完之后才執(zhí)行。所以scope.name = undefined。

關(guān)于“angular指令中preLink和postLink函數(shù)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

新聞名稱：angular指令中preLink和postLink函數(shù)的示例分析
文章網(wǎng)址：http://muchs.cn/article34/pdpgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化