角のあるディレクティブdomのビルド

Question

私のページを開くと、メッセージはバブルイベントのように出てきます。メッセージ2、メッセージ1です。しかし、出力メッセージ1、メッセージ2はトンネルイベントのように必要です。なぜそれが起こったのですか？

<div by-global-size="width:100%;height:5%;"> 
<div by-parent-size="width:50%;height:30%;"> 
</div> 
</div> 

.directive("byGlobalSize", function() { 
    return { 
     link: function (scope, element, attributes) { 
      alert("Message 1"); 
     }, 
     restrict: "A", 
     scope: true 
    } 
}) 
.directive("byParentSize", function() { 
    return { 
     link: function (scope, element, attributes) { 
      alert("Message 2"); 
     }, 
     restrict: "A", 
     scope:true 
    } 
}); 

2つのディレクティブはありませんが、これは単なる例です。

<div by-global-size="width:100%;height:5%;"> 
<div by-parent-size="width:50%;height:30%;"> 
<div by-parentChild-size="width:100%;height:5%;"> 
<div by-parentChildLittle-size="width:50%;height:30%;"> 
</div> 
</div> 
</div> 
</div> 

もう1つのHTMLの例。親から子まで、私はドームツリーを構築する必要があります。

Answer 1

をplunkerで、次の例を確認してください。コンパイル関数は、 の事前コンパイルとポストコンパイルという2つの関数を使用します。

directive('myDirective', function myDirective($log){ 
    var directive = { 
    retstrict : 'A', 
    compile : function compile(){ 
     return { 
      pre : function(scope, iElem, iAttr){ 
       //Your code goes here 
      }, 
      post : function(scope, iElem, iAttr){ 
       // in essence the link function 
      } 
     } 
    } 

    }; 
    return directive; 
} 

https://plnkr.co/edit/zEk0icn4KaQFtX0WHonj?p=preview

リンク機能は、本質的に、ポストコンパイル機能です。あなたが必要とするのは、外から内までの作品を使ったプレコンパイル方法です。

Answer 2

階層が何らかの形で存在する場合、あなたはあなたのディレクティブでrequireキーワードを使用する必要があります

.directive("byParentSize", function() { 
    return { 
     link: function (scope, element, attributes) { 
      alert("Message 2"); 
     }, 
     restrict: "A", 
     scope:true, 
     require:'^byGlobalSize', 
    } 
});