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
Package is available as NPM package.
yarn add @code-restory/cr-transclude
- 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]);- 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>https://codesandbox.io/s/cr-transclude-gi6fd?fontsize=14&hidenavigation=1&theme=dark
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
- ng-transclude should not create new sibling scope
- article - ng-content: The hidden docs
- opensource - ngTranscludeMode & fork for 1.5
- opensource - angular-directives-utils