각도 지시어 dom 빌드

Question

내 페이지를 열면 메시지가 거품 이벤트처럼 출력됩니다. Message 2, Message 1. 그러나 터널 이벤트처럼 Message 1, Message 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 
    } 
}); 

두 개의 지시문이 없어도 하나의 예입니다.

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

하나 더 HTML 예제. 부모부터 자식까지, 나는 dom 트리를 만들어야합니다. 계층 구조가 어떻게 든이있는 경우

Answer 1

확인 다음 예를 plunker에서. 컴파일 함수는 사전 컴파일과 포스트 컴파일의 두 가지 함수를 사용합니다.

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

링크 기능

는 본질적으로 포스트 컴파일 기능입니다. 당신이 필요로하는 것은 outter에서 inner로 작업하는 pre-compile 방법입니다.

Answer 2

, 당신은 당신의 지시에 require 키워드를 사용한다 :

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