How do I use transclusion in angularjs?

Question

In the John Lindquist tutorial, transclusion is used to grab some content from the directive and put it in a desired place.

But the docs talk about translude function and passing it to controller and compile function. So, what is transclusion and how do I use it?

Answer 1

When creating a basic directive, transclusion is easy:

module.directive( 'myTransDir', function () {
  return {
    transclude: true,
    scope: true,
    replace: true,
    template: '<div><h1>Hello!</h1><div ng-transclude></div></div>',
  };
});

Because the template includes the ngTransclude directive, it will automatically transclude the contents for me. If I use it like this:

<div my-trans-dir>
  <p>Some Content</p>
</div>

The resultant HTML will be:

<div>
  <h1>Hello!</h1>
  <div>
    <p>Some Content</p>
  </div>
</div>