angular-multi-transclude

Simple unobtrusive Angular multiple transclusion support for ng-transclude

Install

bower i --save angular-multi-transclude

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 transclusion slots:

angular.module('myApp', ['angular-multi-transclude'])

.directive('myPanel', function(){
  return {
    restrict: 'E',
    transclude: true,
    scope: 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>