How Transclusion Works

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
  <parent-dir>
    <child-dir></child-dir>
  </parent-dir>
</div>

CSS

.directive {
  padding: 1rem;
  border: 2px solid red;
}

JavaScript

angular.module('app', [])
  .directive('parentDir', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: '<div class="directive"><h2>Parent Directive</h2><div ng-transclude></div></div>'
    }
  })
  .directive('childDir', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: '<div class="directive"><h3>Child Directive</h3><div ng-transclude></div></div>'
    }
  })