custom transclusion

Modify transcluded directive

HTML

<script src="http://code.angularjs.org/1.1.3/angular.js"></script>
<script src="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"></script>
<h3>Custom transclude demo</h3>
        
<div ng-controller="DemoCtrl">
    scope.name = {{ name }}
    <br><br>
    <div data-my-directive >this is original content ({{ name }})</div>
    <br>
    <div data-my-directive2 >this is original content ({{ name }})</div>
    <br><br>
</div>

CSS

* {
    font-family: 'Droid Sans', sans-serif;
}
#log {
    margin-top:10px;
    font-size:10px
}

JavaScript

var app = angular.module('demo2', []);

app.controller('DemoCtrl', function($scope) {
    $scope.name = 'world';
});
app.directive('myDirective', ['$parse', function($parse) {
    return {
        restrict: 'A',
        transclude: true,
        template: '<div>transcluded: <span style="color:red" ng-transclude></span></div>'
    };
}]);
app.directive('myDirective2', ['$parse', function($parse) {
    return {
        restrict: 'A',
      
        template: '<div>transcluded: </div>',
        controller: function($element, $attrs, $transclude) {
            // modify the transcluded scope then add the cloned node to the template
            $transclude(function(clone, scope) {
                scope.name = 'AngularJS1';
                var transcluded = angular.element('<span style="color:red"></span>').append(clone);
                $element.children().append(transcluded);
            });
        }
    };
}]);