As per the angulars documentation, Post link function for "Parent" will be executed only once post link function for child directives has been executed.
But, in case of the following code, why i need to fire "emit" event to notify that ng-repeat has been finished off. Ideally it should run automaticlly without the need of emit event.
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('color','blue');
if (scope.$last){
window.alert("im the last!");
}
};
})
.directive('myMainDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('border','5px solid red');
};
});
I am not able to grasp the concept of order of execution of directives. Question in my mind for directive like the one mentioned above always get me confused. Please help me understand this. Thanks in advance!!!
This comes about differently, and you can run a simple test in plnkr. Here is the api reference
In a directive you have a compile function. You can return a function from it that is an object and has two properties, pre, post. Then same goes for the link property, however the compile function is executed if it is present and the link is ignored and the link should only be an object containing the pre and post.
The compile function deals with transforming the template DOM. Since most directives do not do template transformation, it is not used often
Link
This property is used only if the compile property is not defined.
.directive('myDir', myDir);
function myDir() {
var directive = {
compile: compile,
link: {
pre: preLink,
post: postLink
}
};
return directive;
function compile() {
return {
pre: preCompile,
post: postCompile
}
}
function preCompile(scope, elem) {
console.log("Pre Compile");
}
function postCompile(scope, elem) {
console.log("Post Compile");
}
function preLink(scope, elem) {
console.log("Pre Link");
}
function postLink(scope, elem) {
console.log("Post Link");
}
}
So if you run this, with another directive that has the same, and you modified the console logs so you know what was posting out, you'll soon see what it does!
What you notice, is first all the pre compiles are done going into the tree, then on the way back it executes all the post compiles.
Pre-linking function
Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking.
Post-linking function
Executed after the child elements are linked.
Note that child elements that contain templateUrl directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs.
It is safe to do DOM transformation in the post-linking function on elements that are not waiting for their async templates to be resolved.
You don't have to define a pre or post. In fact you can just define a post function by doing:
compile: function (scope, elem) {},
link: function (scope, elem) {}
So basically, not explicitly defining a pre or post it is assumed they are post.
In terms of ng-repeat it adds a view properties onto the directive scope that you could use to determine things. If you give this a read, you'll notice there is quite a lot you can do with an ng-repeat.
<header ng-repeat-start="item in items">
Header {{ item }}
</header>
<div class="body">
Body {{ item }}
</div>
<footer ng-repeat-end>
Footer {{ item }}
</footer>
This is the most applicable to your scenario.
Here are some properties on the scope that you can access:
$even: true
$first: true
$id: 3
$index: 0
$last: false
$middle: false
$odd: false
plnkr
The ng-repeat may execute pre and post differently as expected because of this statement from the docs:
This directive executes at priority level 1000.
Here is a plnkr showing what happens if you change the priority level.
It appears if you change the priority level, that will modify the order of execution in terms of pre and post compiling, and maybe linking. I'm not sure what else is affected by this.
I hope this helps you, please comment for more help if needed!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With