HG2D - transclude:true in Directive

Learn How to use Transclude option in AngularJS Directive

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div transclude-element>I got transcluded <child></child></div>

JavaScript

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

App.directive('transcludeElement', function() {
   return {
     restrict: 'A',
     transclude: 'element',
     compile: function(tElement, tAttrs, transcludeFn) {
       return function (scope, el, tAttrs) {
         transcludeFn(scope, function cloneConnectFn(cElement) {
           tElement.after('<h2>I was added during compilation </h2>').after(cElement);
         });
       };
     }
   };
 });
 
 App.directive('child', function(){
   return {
     restrict: 'E',
     link: function($scope, element, attrs) {
       element.html(' with my child');
     }
   };
 });