La directiva ng-transclude se usa para marcar el punto de inserción para el DOM transcluido del padre más cercano que usa transclusion . Use el nombre de la ranura de transclusión como valor del atributo ng-transclude o ng-transclude-slot .
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>
</head>
<body ng-app="transcludeDemo">
<center>
<script>
angular.module('transcludeDemo', [])
.directive('pane', function() {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
template:
'<div style="border: 3px solid black;">' +
'<div style="background-color: limegreen">'+
'{{title.toUpperCase();}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller(
'ExampleController', ['$scope', function($scope) {
$scope.title = 'gfg';
}]);
</script>
<h1 style="color:green">GeeksforGeeks</h1>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br/>
<pane title="{{title}}">
<span>{{text}}</span></pane>
</div>
</center>
</body>
</html>
Salida: 
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
simpleTranscludeExample
</title>
<script src=
"//code.angularjs.org/snapshot/angular.min.js">
</script>
</head>
<body ng-app="transcludeDemo">
<center>
<script>
angular.module('transcludeDemo', [])
.directive('pane', function() {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
template:
'<div style="border: 1px solid black;">' +
'<div style="background-color: green">'+
'{{title.toUpperCase();}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller(
'ExampleController', ['$scope', function($scope) {
$scope.title = 'gfg';
$scope.text = 'geeksforgeeks';
}]);
</script>
<h1 style="color:green">GeeksforGeeks</h1>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br/>
<textarea ng-model="text" aria-label="text"></textarea>
<br/>
<pane title="{{title}}">
<span>{{text.toUpperCase();}}</span></pane>
</div>
</center>
</body>
</html>
Producción:
Ejemplo-3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-transclude</title>
<script src=
"//code.angularjs.org/snapshot/angular.min.js">
</script>
</head>
<body ng-app="FallbackContentDemo">
<center>
<script>
angular.module('FallbackContentDemo', [])
.directive('myButton', function() {
return {
restrict: 'E',
transclude: true,
scope: true,
template:
'<button style="cursor: wait;">' +
'<ng-transclude>' +
'<b style="color: green;">Click Me!</b>' +
'</ng-transclude>' +
'</button>'
};
});
</script>
<h1 style="color:green">GeeksforGeeks</h1>
<!-- fallback button content -->
<my-button id="fallback"></my-button>
<!-- modified button content -->
<br>
<my-button id="modified">
<i style="color: blue;">Click Me!</i>
</my-button>
</center>
</body>
</html>
Producción: