Dzmitry Devolick Dym Dzmitry Devolick Dym - 1 month ago 16
AngularJS Question

Angular directive dom build

When I open my page, messages output from in to out like a bubble event. Message 2, Message 1. But I need output Message 1, Message 2 like a tunnel event. Why did it happen so?

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


I will not have two directives, this is just an example.

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


One more HTML example. From parent to child, I need build dom tree.

Answer

Check the following example at plunker. The compile function takes two functions, pre compile and post compile.

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

The link function is in essence the post compile function. What you need is the pre-compile method with works from outter to inner.