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.
Link
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!
element:last-child {color: blue;}– David Votrubec Feb 23 '15 at 8:18