angular-multi-transclude/README.md

Simple unobtrusive Angular multiple transclusion support for ng-transclude

# 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:

``` js
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:

``` html
<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>
```