Rendering a Directive's DOM Node Children


Your widget uses the child nodes of the directive element to create a combined rendering.


Use the transclude attribute together with the ng-transclude directive.

  <p>This is my paragraph text.</p>
var app = angular.module("MyApp", []);

app.directive("myWidget", function() {
  return {
    restrict: "E",
    transclude: true,
    template: "<div ng-transclude><h3>Heading</h3></div>"

This will render a div element containing an h3 element and append the directive’s child node with the paragraph element below.


In this context, transclusion refers to the inclusion of a part of a document into another document by reference. The ng-transclude attribute should be positioned depending on where you want your child nodes to be appended.