JSFiddle - React, Tailwind, and code Playground

by honzajde

HTML

<body ng-app="demo">
    <ul>
        <li demo-transclude>
           "hello!" {{ id }}
        </li>
    </ul>
</body>

JavaScript

var demo = angular.module('demo', []);

demo.directive("demoTransclude", function() {
    return {
        transclude: 'element',
        priority: 1000,
        terminal: true,
        compile: function(element, attr, linker) {
            return function(scope, iterStartElement, attr) {
                // works with new linking fn
                var id = 0;
                
                for(var i = 0; i < 5; i++) {
                    var childScope = scope.$new();
                    childScope.id = id;
                    id += 1;
                    iterStartElement.after(linker(childScope, function(c) { return c; }));
                }
 
                // works -- adds 5 elements
                for(var i = 0; i < 5; i++) {
                    var childScope = scope.$new();
                    childScope.id = id;
                    id += 1;
                    linker(childScope, function(clone) {
                        iterStartElement.after(clone);
                    })
                }                   
            }
        }
    };
});