- Home
- Introduction
- Controllers
-
Directives
- Enabling/Disabling DOM Elements Conditionally
- Changing the DOM in response to user actions
- Rendering an HTML Snippet in a Directive
- Rendering a Directive's DOM Node Children
- Passing Configuration Params Using HTML Attributes
- Repeatedly Rendering Directive's DOM Node Children
- Directive-to-Directive Communication
- Testing Directives
- Filters
- Using Forms
- Consuming External Services
- Urls Routing and Partials
- Common User Interface Patterns
- Backend Integration with Ruby on Rails
- Backend Integration with Node Express
Rendering a Directive's DOM Node Children
Problem
Your widget uses the child nodes of the directive element to create a combined rendering.
Solution
Use the transclude attribute together with the ng-transclude directive.
<my-widget>
<p>This is my paragraph text.</p>
</my-widget>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.
Discussion
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.
