cr-transclude

Semi Template Transclude Directive for AngularJs/1

An augmented ng-transclude directives that can pass custom data to the transcluded content from its parent. Somewhat like Angular/2 template outlet.

Template Transclusion In AngularJs

Install

Package is available as NPM package.

yarn add @code-restory/cr-transclude

Usage

1. Setting the module in an application:

import angular from 'angular'; // or <script src="...angular global"></script>

const crTranscludeModule = declareCrTranscludeModule(angular);
const myAppModule = angular.module('myApp', [crTranscludeModule.name]);

2. Then, using the directive in templates:

<li ng-repeat="item in $ctrl.items track by item.id">
  <cr-transclude context="item"></cr-transclude>
</li>

In the transcluded content, there is access to the grandparent scope and the properties given to the context bindings.

<div>{{ $ctrl.listName }}</div.

<my-list items="$ctrl.movies">
   <div>From context: {{ name }}</div>
   <div>From grandparent: {{ $ctrl.listName }}</div>
</my-list>

Demo

https://codesandbox.io/s/cr-transclude-gi6fd?fontsize=14&hidenavigation=1&theme=dark

Additional Info & Attributions

Many thanks to the people who contributed their knowledge and time in the github issues, documents and articles given below. They were invaluable.

• AngularJs directive $compile document
• AngularJs ng-transclude directive & code
• AngularJS ng-repeat directive & code
• Angular/2 ngTemplate outlet
• angular 1.2.18: ng-repeat problem with transclude
• article - ng-content: The hidden docs
• opensource - ngTranscludeMode & fork for 1.5

License

MIT