JSFiddle - React, Tailwind, and code Playground

by jmcooper

HTML

<div ng-app="app" ng-controller="myController">
    <div ng-repeat="module in modules">
        {{module.title}}
        <div ng-repeat="clip in module.clips">
            {{clip.title}}<br/>
            <span transcripts="clip.transcripts"/>
        </div>
    </div>
</div>

JavaScript

var appModule = angular.module('app', [])
.controller('myController', function ($scope) { 
    $scope.modules =  getModules(5);
    
    function getModules(count) {
        var modules = [];
        for (var i = 0; i < count; i++) {
            modules.push({title: 'Module ' + i, clips: getClips(10)});
        }
        return modules;
    }
    
    function getClips(count) {
        var clips = [];
        for (var i = 0; i < count; i++) {
            clips.push({title: 'Clip ' + i, transcripts: getTranscripts(2)});
        }
        return clips;
    }
    
    function getTranscripts(count) {
        var transcripts = [];
        for (var i = 0; i < count; i++) {
            transcripts.push({href:'http://foo.com'+i, text:' foo' + i});
        }
        return transcripts;
    }
});

appModule.directive('transcripts', function() {
    return {
        restrict: 'A',
        scope: {
            transcripts: '='
        },
        compile: function(element) {
            element.removeAttr('transcripts');
            return  function(scope, element, attrs) {
                for(var i = 0; i < scope.transcripts.length; i++) {
                    var link = '<a href="' + scope.transcripts[i].href + '" _target="_new">' + scope.transcripts[i].text + '</a>';
                    element.append(link);
                }
            }
        }
    }
});