Not a Package Manager

    @code-restory/cr-transclude

    2.0.0 • Public • Published

    cr-transclude

    Semi Template Transclude Directive for AngularJs/1

    Node.js CI

    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]);
    1. 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.

    License

    MIT

    Install

    npm i @code-restory/cr-transclude

    DownloadsWeekly Downloads

    19

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    137 kB

    Total Files

    45

    Last publish

    Collaborators

    • elpddev