AngularJS Nested Transclude

by GlobalDomestic

HTML

<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-resource.js"></script>
<div ng-controller="MyCtrl">
    <dir-one items="names"><b>Hello</b> <i>{{ item }}</i></dir-one>
</div>

JavaScript

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

module.controller( 'MyCtrl', [ '$scope', function ( $scope ) {
    $scope.names = [ 'Joe', 'Jane', 'Jon', 'Jess' ];
}]);

module.directive( 'dirOne', [ function dirOne() {
    return {
		restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div class="dirOne">DIR-ONE:<dir-two><div ng-transclude></div></dir-two></div>',
		scope: {
            items: '='
		},
        compile: function compile( element ) {
            console.log( 'dirOne compile', element.html() );
            return {
                pre: function prelink( scope, element, attrs, ctrl, transFn ) {
                    console.log( 'dirOne prelink', element.html() );
                    transFn( scope, function( clone ) {
                        console.log( 'dirOne preLink transFn', clone.html() );
                    });
                },
                post: function postlink( scope, element, attrs, ctrl, transFn ) {
                    console.log( 'dirOne postlink', element.html() );
                    transFn( scope, function( clone ) {
                        console.log( 'dirOne postLink transFn', clone.html() );
                    });
                }
            };
        },
        controller: function( $scope, $element ) {
            console.log( 'dirOne ctrl', $element.html() );
        }
    };
}]);

module.directive( 'dirTwo', [ function dirTwo() {
    return {
		restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div class="dirTwo"><div ng-repeat="item in items"><em ng-transclude></em></div></div>',
        compile: function compile( element ) {
            console.log( 'dirTwo compile', element.html() );
            return {
                pre: function prelink( scope, element, attrs, ctrl, transFn ) {
                    console.log( 'dirTwo prelink', element.html() );
                    transFn( scope, function( clone ) {
                       ...