angular-multiple-transclusion

WebJar for angular-multiple-transclusion

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-multiple-transclusion
Last Version

Last Version

1.0.0
Release Date

Release Date

Type

Type

jar
Description

Description

angular-multiple-transclusion
WebJar for angular-multiple-transclusion
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/mcasimir/angular-multiple-transclusion

Download angular-multiple-transclusion

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-multiple-transclusion/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-multiple-transclusion</artifactId>
    <version>1.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-multiple-transclusion/
implementation 'org.webjars.bower:angular-multiple-transclusion:1.0.0'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-multiple-transclusion/
implementation ("org.webjars.bower:angular-multiple-transclusion:1.0.0")
'org.webjars.bower:angular-multiple-transclusion:jar:1.0.0'
<dependency org="org.webjars.bower" name="angular-multiple-transclusion" rev="1.0.0">
  <artifact name="angular-multiple-transclusion" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-multiple-transclusion', version='1.0.0')
)
libraryDependencies += "org.webjars.bower" % "angular-multiple-transclusion" % "1.0.0"
[org.webjars.bower/angular-multiple-transclusion "1.0.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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:

Versions

Version
1.0.0