Angular Multiple Transclusion
A concise way to use multiple ng-transclude directives within the same AngularJs template.
Angular Multiple Transclusion extends ng-transclude to add support for multiple transclusion.
<div class="panel panel-default">
<div class="panel-heading" ng-transclude transclude-from="header">
</div>
<div class="panel-body" ng-transclude transclude-from="content">
</div>
</div>
Demo
http://codepen.io/mcasimir/pen/XbapYd
Install
bower i --save angular-multiple-transclusion
Usage
Example task: Create a myPanel directive transcluding a fragment to the header and a fragment to the body.
Use transclude-from attribute along with ng-transclude directive to define insertion points for transclusion:
angular.module('myApp', ['angular-multiple-transclusion'])
.directive('myPanel', function(){
return {
restrict: 'E',
transclude: true,
template:
'<div class="panel panel-default">' +
' <div class="panel-heading" ng-transclude transclude-from="header">' +
' </div>' +
' <div class="panel-body" ng-transclude transclude-from="content">' +
' </div>' +
'</div>'
};
});
Use transclude-to to wire each element to the respective ng-transclude block:
<main ng-app="myApp">
<my-panel>
<div transclude-to="header">Hi there!</div>
<div transclude-to="content">Lorem ipsum dolor sit amet...</div>
</my-panel>
</main>
Works with isolated scopes
.directive('myDialog', function(){
return {
restrict: 'E',
scope: {
title: '@'
},
transclude: true,
template:
'<div class="dialog">' +
' <div class="dialog-title">{{title}}</div>' +
' <div class="dialog-body" ng-transclude transclude-from="content">' +
' </div>' +
' <div class="dialog-actions" ng-transclude transclude-from="actions">' +
' </div>' +
'</div>'
};
});
<main ng-app="myApp" ng-init="title='My Document'">
<my-dialog title="Save Document">
<div transclude-to="body">Are you sure?</div>
<div transclude-to="actions">
<button>Save {{title}}</button>
</div>
</my-dialog>
</main>
Why multiple transclusion rocks?
See how people at OpenTable uses multiple transclusion with angular to create reusable components: