Defer compilation or linking of a child directive from the parent - angularjs

Question

I'm trying to build an AngularJS directive that, during the linking phase, moves it's children (which are also directives) into another location before the children get into their linking phase. The moving of the children is easily achieved using transclution, however, even though I don't immediately put the child elements back into the DOM they still get compiled and linked.
The use case that I'm building this for is an image gallery directive that manages the loading of its images so that a gallery with a large number of images only loads the ones that are actually needed for rendering. The 'images', that are the child directives of the gallery, set the image src during the linking phase. Unfortunately, the image directive can't be easily modified since it's used very prolifically throughout the rest of the site.
A generic prototype of the use case that I'm describing to can be seen here:
http://jsfiddle.net/vmJKK/1/
var app = angular.module('myApp', []);
app.directive('parent', function ($timeout) {
return {
restrict: 'E',
transclude: true,
template: '<div><ol><li ng-repeat="log in logs track by $index">{{log}}</li></ol><hr></div>',
link: function ($scope, $element, $attrs, ctrl, $transclude) {
var _children = [];
$scope.logs = [];
$transclude(function (clones) {
$scope.logs.push('Transcluding');
angular.forEach(clones, function (clone) {
if (clone.nodeName !== '#text') {
_children.push(clone);
}
});
});
$timeout(function () {
angular.forEach(_children, function (child) {
$scope.logs.push('Appending child');
$element.append(child);
});
}, 2000);
}
};
});
app.directive('child', function () {
return {
restrict: 'E',
template: 'I am a child!',
link: function ($scope, $element, $attrs) {
$scope.$parent.logs.push('Linking child');
}
};
});
The current output of the prototype execution is:
1. Transcluding
2. Linking child
3. Linking child
4. Appending child
5. Appending child
What I want it to be is:
1. Transcluding
2. Appending child
3. Linking child
4. Appending child
5. Linking child
...or something like that, where the linking of the child doesn't occur until it's being appended.

Answer 1

You should be able to change child directive without breaking functionality with the code similar to this:
link: function ($scope, $element, $attrs) {
function link() {
$scope.$parent.logs.push('Linking child');
}
if (angular.isDefined($attrs.defer)) {
$element[0].link = link;
} else {
link();
}
}
The idea is to wrap current link function inside function that is either called immediately or attached to DOM node as parameterless link() function and called from append function of parent directive (if defer attribute is provided). I hope this is acceptable in your case.
The code is here: http://jsfiddle.net/vmJKK/5/
By the way, I have never seen the question of this quality so far. Perfect.