What is ng-transclude?
Transclude is a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere(Where actually the ng-transclude is at) in the directive's template. Read more about this under Creating a Directive that Wraps Other Elements section on documentation of directives.
If you write a custom directive you use ng-transclude in the directive template to mark the point where you want to insert the contents of the element
angular.module('app', []) .directive('hero', function () { return { restrict: 'E', transclude: true, scope: { name:'@' }, template: '<div>' + '<div>{{name}}</div><br>' + '<div ng-transclude></div>' + '</div>' }; });If you put this in your markup
<hero name="superman">Stuff inside the custom directive</hero>It would show up like:
Superman
Stuff inside the custom directive
Full example :
Index.html
<body ng-app="myApp"> <div class="AAA"> <hero name="superman">Stuff inside the custom directive</hero></div></body>jscript.js
angular.module('myApp', []).directive('hero', function () { return { restrict: 'E', transclude: true, scope: { name:'@' }, template: '<div>' + '<div>{{name}}</div><br>' + '<div ng-transclude></div>' + '</div>' }; });Output markup
Visualize :
it's a kind of yield, everything from the element.html() gets rendered there but the directive attributes still visible in the certain scope.