# transcluder

**Repository Path**: mirrors_bvaughn/transcluder

## Basic Information

- **Project Name**: transcluder
- **Description**: Another Angular directive to help with multiple transclusion within a single directive
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# transcluder

> Another Angular directive to help with multiple transclusion within a single directive.

## Usage

You can install this plugin with either [Bower](http://bower.io/) or [NPM](https://www.npmjs.org/).

### Bower
```shell
bower install transcluder --save-dev
```

### NPM
```shell
npm install transcluder --save-dev
```

Then just include the *transcluder* module in your Angular application like so:

```js
angular.module('myAngularApp', ['transcluder']);
```

## Overview
The transcluder directive enables more powerful and better organized directive templates.

Consider the following 'foobar' directive template and its use of the transcluder:
```html
<div transcluder class="foobar">
  <div class="styled-header" transclude-header></div> <!-- attribute notation supported -->
  <hr/>
  <transclude-content></transclude-content> <!-- element notation also supported -->
</div>
```

Assume that another component were to use the 'foobar' directive as follows:
```html
<foobar>
  <h1 transclude="header">Foobar</h1>
  <p transclude="content">Lorem ipsum.</p>
</foobar>
```

The transcluder would automatically convert the above into the following:
```html
<div transcluder class="foobar">
  <h1 class="styled-header">Foobar</h1> <!-- directive template class names preserved -->
  <hr/>
  <p>Lorem ipsum.</p>
</div>
```

Please note the parent directive must specific transclude:true flag or this directive will error. For the above example, that means the 'foobar' directive might look like this:
```js
angular.module('foobar', []).directive('foobar',
  function() {
    return {
      templateUrl: 'path/to/foobar.html',
      restrict: 'E',
      transclude: true
    };
  }
);
```