3

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

5

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!

|improve this answer|||||
  • Hi, Thanks for your reply!!! I have checked your plunkr. It works fine as expected. Try adding "ng-repeat" to child element and see the behavior. Both "Pre" n "Post" for parent will be executed first. Whereas the expected behavior should be as mentioned below: 1. Pre link for parent 2. Pre link for child 3. Post link for child 4. Post link for parent Please comment on this behavior and this was my actual question. – Manish Kumar Feb 23 '15 at 9:28
  • I still get the same order, it will pre the parent, then the child - then post the child then the parent. Because of the ng-repeat this behaviour will be repeated. It is what I would expect. @mkdudeja – Callum Linington Feb 23 '15 at 9:53
  • @mkdudeja I just update the plnkr to include whether the directive is a parent or child. Check the link again at the top of the post – Callum Linington Feb 23 '15 at 9:56
  • Please have a look on the following plunkr example: plnkr.co/edit/gY4DtTlbIIXN9c4mjJnA?p=preview Watch the console for logs – Manish Kumar Feb 23 '15 at 10:04
  • So from what I can see, is that it pre and post before the ng-repeat starts. I'm not sure why, but if you see my revised answer at the bottom, you can access ng-repeat information. plnkr – Callum Linington Feb 23 '15 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.