JSFiddle - React, Tailwind, and code Playground

by rapsac

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<div ng-app="myApp" >
<repeat-demo customers="customers"></repeat-demo>
</div>

JavaScript

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

app.controller('MyController', ['$scope', function($scope){
    $scope.customers = [
        {name:"joe",age:34},
        {name:"jenny",age:55},
        {name:"juliette",age:21}
    ];
}]);

app.directive('repeatDemo', function() {
    
    var linker = function(scope, element, attrs) {
        
        var template = '<div class="form-group">' +
        '  <label class="col-sm-2 control-label" >Customers</label>' +
        '  <div class="col-sm-10">' +
        '    <ul>' +
              '<li ng-repeat="customer in customers">' +
                '<strong>{{customer.name}}</strong> {{customer.age}}' +
              '</li>' +
             '</ul>' +
        '  </div>' +
        '</div>';
        
        element.html(template);

        $compile(element.contents())(scope);
        
        $timeout(function () {
  html = factory.html();
  // ... do whatever you need with the interpolated HTML
});
    };

    return {
        template: tmpl,
        replace: true,
        restrict: 'E',
        scope: {
            customers: "="
        },
        link : linker

    };
});