JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<div ng-controller="MyCtrl">
    <div ng-repeat="widget in widgets| orderBy:'order'">
        <div ng-switch on="widget.type">
            <div ng-switch-when="insights">
                <div insights></div>
            </div>
            <div ng-switch-when="reports">
                <!--<div reports></div>-->
                <div class="two">This would be a Report<div class="subDirective"><div ng-repeat="item in items">test: {{item.id}}</div></div></div>
            </div>
        </div>
    </div>
    
<div class="subDirective">
    <div ng-repeat="item in items">test:{{$index}}</div>
</div>

CSS

div.one {
    background: #ccc;
}
div.two {
    background: #aaa;
}

JavaScript

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

myApp.directive('insights', function () {
    return {
        restrict: 'A',
        replace: true,
        template: '<div class="one">This would be an Insight</div>'
    }
});

myApp.directive('reports', function () {
    return {
        restrict: 'A',
        replace: true,
        template: '<div class="two">This would be a Report<div class="subDirective"><div ng-repeat="item in items">test: {{item.id}}</div></div></div>'
    }
});

myApp.directive('subDirective', function () {
    return {
        restrict: 'C',
        link: function(scope, element, attrs, ctrl) {  
            scope.items = [
                {
                    id: 1   
                },
                {
                    id: 2   
                }
            ];
        }
    }
});

function MyCtrl($scope) {
    $scope.foo = "value";
    $scope.widgets = [
        {
            id: 1,
            order: 1,
            type: "insights"
        },
        {
            id: 2,
            order: 3,
            type: "reports"
        },
        {
            id: 3,
            order: 2,
            type: "reports"
        },
        {
            id: 4,
            order: 0,
            type: "insights"
        }
    ];
}