Why outer post linking called before inner linking when the inner directive has a ng-repeat

Vote count:

0

I am debuting with AngularJs, and I am trying to define custom directive. The problem is that I do not understand well the order of execution of pre and post linking functions when I have a ng-repeat directive.

http://ift.tt/1Dz930v

<div ng-controller="TestController">
<outer id='o1'>
    <inner id='i1' ng-repeat='value in values'>{{value}}</inner>
</outer>
<outer id='o2'>
    <inner id='i2'>X</inner>
</outer>
<div id='log'></div>
</div>

and the javascript is

var myApp = angular.module('mainApp', []);

var logIt = function() {
    var log = document.getElementById('log');
    return function (txt) {
        log.innerHTML += txt + "<br />";
    }
}();

myApp.controller('TestController', ['$scope', function ($scope) {
    $scope.values = [1,2,3];
    logIt("new controller");
}])
.directive('outer', function () {
    return {
        restrict: 'E',
        scope: {},
        link: {
            pre: function (scope, element, attrs) {
                logIt("outer - pre - " + attrs.id);
            },
            post: function (scope, element, attrs) {
                logIt("outer - post - " + attrs.id);
            },
        }
    };
})
.directive('inner', function () {
    return {
        restrict: 'E',
        link: {
            pre: function (scope, element, attrs) {
                logIt("inner - pre - " + attrs.id);
            },
            post: function (scope, element, attrs) {
                logIt("inner - post - " + attrs.id);
            },
        }
    };
});

The order of execution I get from running the script is

outer - pre - o1
outer - post - o1
outer - pre - o2
    inner - pre - i2
    inner - post - i2
outer - post - o2
    inner - pre - i1
    inner - post - i1
    inner - pre - i1
    inner - post - i1
    inner - pre - i1
    inner - post - i1

From what I have read, the normal order is

outer-pre -> inner-pre -> inner-post -> outer-post

But with an ng-repeat (ng-if does it as well), the inner functions are called after the outer-post

I read that could happen with a templateUrl, but this is not the case here. How is the ng-repeat directive influencing the order of execution?

asked 2 mins ago

Olivier Georg

1

Why outer post linking called before inner linking when the inner directive has a ng-repeat