https://github.com/mcasimir/angular-multiple-transclusion
Simple unobtrusive angular multiple transclusion support with ng-transclude
https://github.com/mcasimir/angular-multiple-transclusion
Last synced: about 2 months ago
JSON representation
Simple unobtrusive angular multiple transclusion support with ng-transclude
- Host: GitHub
- URL: https://github.com/mcasimir/angular-multiple-transclusion
- Owner: mcasimir
- Created: 2015-06-15T14:35:21.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-06-15T20:16:09.000Z (almost 10 years ago)
- Last Synced: 2025-04-09T18:15:08.310Z (about 2 months ago)
- Language: JavaScript
- Size: 133 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
``` html
```
## 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:
``` js
angular.module('myApp', ['angular-multiple-transclusion'])
.directive('myPanel', function(){
return {
restrict: 'E',
transclude: true,
template:
'
' +
' ' +
' ' +
' ' +
' ' +
''
};
});
```
Use `transclude-to` to wire each element to the respective `ng-transclude` block:
``` html
Hi there!
Lorem ipsum dolor sit amet...
```
## Works with isolated scopes
``` js
.directive('myDialog', function(){
return {
restrict: 'E',
scope: {
title: '@'
},
transclude: true,
template:
'
' +
' {{title}}' +
' ' +
' ' +
' ' +
' ' +
''
};
});
```
``` html
Are you sure?
Save {{title}}
```
## Why multiple transclusion rocks?
See how people at [OpenTable](http://www.opentable.com) uses multiple transclusion with angular to create reusable components:
- https://www.airpair.com/angularjs/posts/creating-container-components-part-2-angular-1-directives