What is transclusion in AngularJS?
Quick Answer
Transclusion is a directive taking the original content between its tags and inserting it somewhere in the directive's own template, using ng-transclude. It's how a directive wraps arbitrary content — a modal, a panel, a tab — the AngularJS equivalent of Vue slots or React children.
Transclusion is how a directive wraps content you pass into it. You set transclude: true, and in the directive's template you put ng-transclude where the original inner content should end up — so a <my-panel>some content</my-panel> renders the panel chrome around “some content.” It's the same idea as slots in Vue. The gotcha is that the transcluded content stays bound to the scope where it was originally written, not the directive's isolate scope.
{ transclude: true, template: '<div class="panel"><div ng-transclude></div></div>' }.- The transcluded content keeps its original scope (the one where it was written), not the directive's isolate scope — a common source of confusion.
- Multi-slot transclusion (1.5+):
transclude: { title: '?paneTitle', body: 'paneBody' }.