angular-multiple-transclusion

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:

• https://www.airpair.com/angularjs/posts/creating-container-components-part-2-angular-1-directives